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.
Related
Yesterday I visited Artstation and I noticed a cool effect on the main background image at the top for each profile on Artstation. If you resize the window from desktop size to the left and make the window smaller, the image starts to resize and at approximately 1430 px inner size and end at approximately 1010 px inner size and after that it stops resize. The resizing is just like when you resize a common image, but this is a background image. This effect is nice for a responsive design.
I have tried to inspect the CSS, but I can't find the answer. Someone who can tell me how this is done?
This is a randomly selectedthe profile that I was looking at to show what I mean:
https://www.artstation.com/gaelleseguillon
When I try to use a background image I use this code:
.topContainerBackground
{
background-image: url(../imagesLayout/background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
height: 600px;
width: 100%;
position: relative;
}
But as I wrote, I don't get the resize thing at approximately 1430 px inner size.
background-size: cover; is the key here. 1430px has no real significance, it's a function of the proportions of the background image.
When a window is really wide, cover background sizing is mostly responding to the vertical height of the container, stretching the image to match vertically.
Once you start shrinking the window, there comes a point where height is no longer the primary concern, width is. That is where the image seems to begin scaling horizontally.
I'm working on a responsive site (using Foundation 3) that uses brush strokes as button backgrounds. I'm having a hard time with 1) getting the images to scale with the rest of the responsive design 2) making the full size background image show no matter how big the container div is.
A couple screen shots:
When the browser is full width-
http://www.screencast.com/t/3Lu86fhnsZkk (I'm a new user can't post images)
When the browser scales in width-
http://www.screencast.com/t/3Lu86fhnsZkk
CSS:
h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}
What's the better way to have background images that 1)show full size even though the content is small and 2) stay responsive?
For making the background fit to the container it belongs to, set the background-size to cover
h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
The Image will resize while you resize the container element, so make the container element responsive using percentage values for width/height or use media queries.
Use min-width and max-width to prevent the element from getting too small or wide.
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;
I want to keep my bg image centered, no matter if the user's monitor is large enough to fit the whole thing or too small to display it all at once. Similarly, it should remain centered horizontally when a user zooms in using ctrl+. The issue is best illustrated with images. Here is a zoomed out shot, which is the correct behavior:
Here is a zoomed in shot, which is not correct. The background shows the left margin, and is cut off 100% on the right side. It should get cut off equally from the left and right sides:
Finally here is the sample page, so you can play around with zooming in and out yourself:
http://pastehtml.com/view/b3qfjcghu.html
Thanks!
You seem to give the container the size of the image, so in fact it never is really 'centered' because it fits neatly at all times.
If you use this for #container:
width: 100%;
Then it will be using the full width of the screen, so that the background will be centered depending on the screen size.
http://jsfiddle.net/pimvdb/AxzdP/
Or, as Artfunkel suggested, you might want to just use the body element without any containers.
body {
background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
background-position: center 0%;
}
What you could also do is creating a separate container like this:
<div id="bgcontainer"></div>
with:
#bgcontainer {
width: 100%;
height: 1000px;
background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
background-position: center 0%;
z-index: -999 /* keep on background so that other elements are above it */
}
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;