I would like to make it look like in this picture:
I am using wordpress and I still did not figure out how to make it full width.
I hope you can help me. Thank you in advance.
What I have right now:
CSS of the left picture:
#parallax887 {
background: rgba(0, 0, 0, 0) url("http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg") repeat scroll 50% 0 / cover ;
min-height: 350px;
position: relative;
}
CSS of the Picture on the right side:
#parallax887 {
background: rgba(0, 0, 0, 0) url("http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg") repeat scroll 50% 0 / cover ;
min-height: 350px;
position: relative;
It seems that you -mistakenly- duplicated the style for left & write image. But anyway you can achieve that like this:
Give both images width: 50%;
Remove Margins
The trick here is to remove the white space between the images that results from pressing enter or space after the first element
for example you should either put your images like this <img /><img /> or
<img /><!--
commenting to escape white space
--><img />
Here is the code
HTML
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Flag_of_Afghanistan_(1880%E2%80%931901).svg/2000px-Flag_of_Afghanistan_(1880%E2%80%931901).svg.png" id="first" /><!--
--><img src="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg" id="second" />`
CSS
#first, #second{
width:50%;
min-height: 350px;
margin: 0px;
}
And here is a fiddle.
Related
I know this is a bit weird question. but quite curious about this. Can we make background property work like an overlay? without using any extra html tag.
E.g,
<img style="background: url('some image url to be overlayed on the actual image')" src="image src which will be hidden under the background image" alt="">
Is it possible?
Do you mean something like this? I used padding for the size.
img {
padding-bottom: 35%;
width: 500px;
background: url(https://homepages.cae.wisc.edu/~ece533/images/airplane.png);
height: 0;
}
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="" title="test">
You can do that, but you would have to pad your overlay image to reveal its background:
#img{
height: 20; // Front image height
width: 20; // Front image width
padding: 50px 80px; // needs to be adjusted depend on your BG img size
background-image: url('path_to_image');
background-repeat: no-repeat;
}
The divs of the bellow web page shift out of alignment when the window is made too narrow, or the image thumbnails are clicked. Is there a way to prevent this from happening?
http://nosgoth.net/NR-Test/ff_scroll-test3.html
Note that the "frametop" div and "framebtm" div contain images inserted into the html, while the "text", "content", and "container" divs use background images. Thanks.
So, your issue was that your background-images were in a fixed and centered position relating to the viewport. By themselves neither of these are an issue, but together they try to remain in a fixed position while being centered to the screen. It causes issues when the screen is smaller than the image itself. Unfortunately if you remove one or the other, it breaks your expected output.
One way to fix it would be to use media queries (like Trix and afelixj) suggest. Another way is to redo your code and not use background-image. I took this approach.
Instead of having each piece of your frame be built upon elements being used for content, I moved them down into their own div called #frame. With a bit of fixed positioning your original concept remains unscathed. However, it is not responsive (though you could make it fluid with percentages and viewport units easily enough).
Here's a striped down concept of the way I rewrote it:
CSS:
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides,
#frame .framebtm,
#frame .side_decor {
display: block;
position: fixed;
left: 50%;
transform: translate(-50%);
}
#frame .side_decor {
top: 50%;
transform: translate(-50%, -50%);
}
#frame .scroll_bg,
#frame .frame_sides,
#frame .side_decor {
z-index: -5;
}
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides {
top: 0;
}
#frame .framebtm {
bottom: 0;
}
HTML:
<div class="content">...</div>
<div id="frame">
<img class="scroll_bg" src="http://nosgoth.net/NR-Test/images/scroll_bg.png" alt="" />
<img class="frame_sides" src="http://nosgoth.net/NR-Test/images/frame_sides.png" alt="" />
<img class="side_decor" src="http://nosgoth.net/NR-Test/images/side_decor.png" alt="" />
<img class="frametop" src="http://nosgoth.net/NR-Test/images/frametop.png" alt="" />
<img class="framebtm" src="http://nosgoth.net/NR-Test/images/framebtm.png" alt="" />
</div>
I placed the frame at the bottom (so it would be on top of everything else) and moved each portion into place with fixed positioning. The scroll background, sidebars, and side decorations were given a negative z-index so that all content would be on top of it and remain clickable.
After that it was just making everything fit. I played around a bit with your values, but for the most part the rest of the code is yours (body and html are the only other places I made modifications).
The whole thing still moves when the images are clicked at the bottom, but I have a suspicion that that is fancybox's issue.
Here's a codepen of the final result.
Thats because this div
<div class="text"></div>
has a fixed-width background-image:
.text {
background-image: url(images/side_decor.png);
}
If you want to make it properly in different browser window sizes, you may consider having multiple copies of side_decor.png and assign theme for different broswer widthslike this:
#media screen and (max-width: 400px){
.text {
background-image: url(images/side_decor_400.png);
}
}
#media screen and (min-width: 400px) and (max-width: 800px){
.text {
background-image: url(images/side_decor_800.png);
}
}
For a quick fix, please try appending the below styles
body{
max-width: 814px;
width: auto;
}
.frametop, .framebtm {
left: 50%;
transform: translateX(-50%);
}
#media (max-width: 680px){
body{
overflow-x: hidden;
}
img{
height: auto;
max-width: 100%;
}
.text{
padding: 0 20px;
}
}
I have 2 images - one is the main image and the other is like a picture frame that I'd like to position over the top of the main image.
The picture frame image is a png with a transparent center so the main image shows through.
The dimensions of the images are important - the inner main image has to be smaller than the frame so it is only visible through the center:
main.jpg = 367 x 550
frame.png = 405 x 597
I thought I had it with the following code...
<div style="background-image:url('/main.jpg') no-repeat scroll center center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>
...which works great until you see the screen on a mobile phone; the frame.png stretches because I've given the width as 100% but the background main.jpg doesn't stretch along with it.
I need the design to be fluid, so I need the images to stretch.
Is there a way to make sure the background stretches the same as the main image?
I've tried all kinds of different methods to get this working, absolutely positioning the frame in a div floating over the main image, etc but I couldn't get the main image to appear centered horizontally and vertically when I did that.
Is there any way to achieve what I want without resorting to javascript?
The reason I'm using 2 images by the way is because of file size. I need the main image to be jpg so I can keep it small, but I also need the transparency on the frame so that has to be png :(
I usually use this:
HTML:
<div id="frame">
<img id="myImg" src="main.jpg">
</div>
CSS:
#frame {
position: relative;
width: 597px;
height: 405px;
background-image: url(frame.png);
background-position: center;
background-size: cover; }
#myImg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
margin: auto; }
This works for all images and other elements with fixed dimensions, or a set max-width and max-height.
I hope this works for you :)
I've created a fiddle for you.
http://jsfiddle.net/avrahamcool/4VQzP/
in my fiddle, the frame is just a black background, and the img is just a red background. as you can see, no need for transparent frame (because the img is above it)
instead of centering the frame above the img, I'm centering the img above the frame.
(if I understood correctly, this also serves your purpose)
HTML:
<div id="Frame">
<span class="Centerer"></span><img src="http://i.imgur.com/CbcmRLC.jpg"/>
</div>
CSS:
#Frame
{
width: 405px;
height: 597px;
background: url('http://i.imgur.com/uRvKrNR.jpg') no-repeat;
text-align: center;
}
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
#Frame > img
{
vertical-align: middle;
}
I generally use another image absolute positioned as background. like:
<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" />
<!-- Then do the positioning with classes -->
</div>
Give it a shot, hope it works as you want
If you set the image as absolute; it is going to lift out of it's container.
Floating may do the same.
What about z-index:1; and x-index:2; with margin:auto; ?
im trying to make a facebook like blue bar.
So, i noticed they make a blue bar with width 100%, and make a new div under it which selects half of the div like this(the light blue part is the new div)
So, then the text or link i put under the new div is alligned just like i want it.
How can i achieve this?
My HTML
<div class="topBar" >
<div class="bar_frame">
fuuu
</div>
</div>
And here is my CSS
.topBar {
background: #3b5998;
top: 0;
height: 36px;
width: 100%;
background-position: center;
position: fixed;
}
.bar_frame{
/* The new div code must go here but i dont know how to do this */
}
This will work. I'm assuming you just need to center a fixed-width div in its parent element? This is exactly how Facebook does it in your example, and this is how it is done in many cases:
.bar_frame{
width: 981px;
margin: 0px auto;
}
Demo fiddle
I have an issue with a site I am working on where the right wrapper keeps dropping down below the site. Obviously I want it to stay on the right hand side.
I've coded up a test case which shows my issue (I think) and I'm wondering if there is a better way to do things.
The website url is http://www.musicworkshop.co.nz/
Below is the test case which (I think) is the cause of my issue, however it may not be. The pink box drops down if it does not fit within the page width.
I've also included a diagram of what I'm trying to achieve along with a screenshot of the right wrapper not where it should be.
Is there a better way to do this?
John
<html>
<head>
<title> Test page </title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="superbox">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
</div>
</body>
</html>
#superbox{
width: 1000px;
height: 100px;
margin: 0 auto;
}
#box1{
height: 100px;
width: 200px;
background: red;
float: left;
}
#box2{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
#box3{
height: 100px;
width: 200px;
background: blue;
float: left;
}
#box4{
height: 100px;
width: 200px;
background: green;
float: left;
}
#box5{
height: 100px;
width: 200px;
background: grey;
float: left;
}
#box6{
height: 100px;
width: 200px;
background: pink;
float: left;
}
alt text http://www.musicworkshop.co.nz/website.png
alt text http://www.musicworkshop.co.nz/website_right-wrap-missing.png
Since all your boxes are 200px wide go for a %.
if it doesn't fit into the page width, this is the way float works... if you want to have the boxes in one line whatever happens, set your superbox with to the with of all boxes (which is 200*6 = 1200 / not 1000).
EDITS:
Looking at your example site I think you mean when the viewwindow is small that you want the div to go off-screen. In your case the best solution is to make that repeating image the background-image of your body.
Something like:
body { background: #6593aa url('http://www.musicworkshop.co.nz/templates/musicworkshop/images/right_repeater.png') repeat-x; }
And make sure to take the backgrounds off your other divs. You'll probably want to pick a different image to repeat with too rather than just the right segment. I can see you were trying to get it to match up with the header nicely but the way you are going about it just won't work. My best solution is to use a transparent background on your leftwrap and rightwrap near header (use a .gif or .png with transparency for your rounded corner rather than the current image with the bit of "amplitude wave" in the background).
Summary:
Remove all wrapper etc. backgrounds.
Change the "rounded corner" images to have a transparent background.
Remove your "repeating" divs.
Apply that CSS above to the body.
Original:
What's your desired behaviour? For superbox to go 1200px? Unfortunately you can't have fixed sizes and "auto-grow".
If you want 'superbox' to grow to fit its children then don't specify a width (i.e. leave it width:auto).
If you instead want the children to resize if they are too large for 'superbox' use percentage widths on them.
It sounds like you want your boxes to stay their current size and not wrap. Well try and imagine what would happen if you put a new div under 'superbox' and wrapping your 'box_'es that had a width of 1200px. It's going to make 'superbox' grow to wrap around it so at the end of the day you might as well just make 'superbox' this larger width in the first place!