I have a sidebar with 2 background images. This is my CSS:
background-color: #fff;
background-image: url('img/back-1.png'), url('img/back-2.png');
background-position: left top, left top;
background-repeat: no-repeat, repeat-y;
background-size: 100% auto, 100% auto;
when I change the width of the browser with the mouse (I use responsive design), the second image disappears in some position. But if I refresh the page or change the width, everything restores. Do you have any idea why does the image disappear?
I had a similar issue,
I made 2 classes of CSS,
Detected the browser width by JavaScript,
Attached the right one to the class by JavaScript;
Related
I have set up two background images on showcase side by side. It looks fine when I see it on a full screen but when I change the size of the screen by moving the web browser, the image on the left goes over on the image on the right... so I'd like to know how to set both images moving equally. (means change the size of images equally, not left one goes over on the right image) Thank you very much for your help.
#showcase{
min-height: 400px;
background: url("../IMGS/showcase.jpg") left no-repeat, url("../IMGS/showcase2.jpg") right no-repeat;
padding: 15px;
}
You should add / 50% exactly after the background-position property which in this case is left or right for either of the images.
you can see the css block as follows:
#showcase{
min-height: 400px;
background: url("../IMGS/showcase.jpg") left / 50% no-repeat, url("../IMGS/showcase2.jpg") right / 50% no-repeat;
padding: 15px;
}
You can read more and experiment with the property at the MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/background
You may have to individually style each image to "width: 50vw;" that will set each of them to occupy 50% of the view-port no matter the size of the window. So they should each change dynamically and adjust by the same size when the window increases or decreases.
I have a simple div with width less than 100%, with a background image having background-position 100% 0. Instead of the bg image sticking to the right side of the div, it is getting cut off, and seems to think its actual right position is the edge of the body, not the div whose background it is.
.bg {
width:80%;
height:500px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0;
background-size: 50%;
background-image: url(http://www.blackitty.net/photographs/photos/slideshow/slide/133/Tofino_2013-11-24.jpg);
}
I made a fiddle for it: http://jsfiddle.net/bobmeador/j2MWX/ The upper element shows the problem. Below is the full image so you can see what is getting cut off.
Any idea why it seems to be using the parent for its positioning rather than the div it belongs to?
I have the same result when my .bg div is set to width 100% and it is inside a div set to 80% width. It seems to be ignoring any container widths and just using the overall body width for its 100% reference.
I tihnk the problem is this background-attachment: fixed;, if you remove it the image aligns perfectly to the right.
http://jsfiddle.net/j2MWX/2/
I'm having a problem with positioning two background images in Chrome.
In FF and IE the images are right where I want them to be, but in Chrome they both just sit in the top left corner.
So Chrome ignores the background-position property.
When I remove the 150px from that property, it works, but I want the images 150px from the bottom.
#wrap {width:100%; position:relative;z-index:1; background-color:#ebebeb; background-image: url("/portals/0/images/bosch_rechtsonder.png"),url("/portals/0/images/meba_linksmidden.png"); background-position: right bottom 150px, left bottom 150px; background-repeat: no-repeat;background-attachment: scroll, scroll;}
Does anyone have another solution to this?
Thanks in advance!
What do you mean by giving 3 values?
background-position: right bottom 150px, left bottom 150px;
The value right is fine, bottom is fine. Why is the 150px there? Remove it. Change it to:
background-position: right bottom, left bottom;
You know that it is a fixed positioning of 150px from the bottom. The only way is to give 150px of whitespace or setting it transparent using an image editor and put it on the background. It cannot be controlled by pure CSS, without knowing the element's height.
I am setting a background image in the css as
body{
background-image: url('image.jpg');
background-repeat: repeat-x;
}
However, this does not increase the height of the background image as the page height increases. How can this be resolved?
Change repeat-x to repeat, so that it repeats both horizontally and vertically:
body{
background-image: url('image.jpg');
background-repeat: repeat;
}
Repeat-x only repeats horizontally, you want vertically, so either use simply "repeat" (will repeat vertically and horizontally) or
"repeat-y" (repeats vertically)
Also if you want to clean up your css and not have 30 different options to effect the background just use (I'm guessing you're using a WYSIWYG editor like Dreamweaver to do your css, I'd suggest and IDE, I use Aptana studio, but there's plenty of good options out there. It'll be easier to avoid a "bloated" style sheet if you avoid WYSIWYG editors)
body{
background: url('image.jpg') repeat-y center top;
}
You can throw a color value in there as well.
Say I have an image that has a width of 2000px. The snazzy design part of my image starts at about 600px in and is 900px wide or so. What I want to do is to use this image as the background on a website and have the snazzy design centered and when you stretch the browser window, reveal the entire image still keeping the snazzy design centered. How can I do this? Also, putting the snazzy part in it's own layer above the background is not an option.
Thanks
You can center the background image using the CSS background-position attribute:
background-position: top center;
To add to Guffa's answer, you can also use percentage and pixel values to position your background image:
/* Centered vertically, 200px down from the top of the page */
background-position: 50% 200px;
/* 30px from the left edge, -10px from the top (shifted up beyond the top) */
background-position: 30px -10px;