I have an image as background with the following CSS setup
#background {
background-image: url('../img/bgimage.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
opacity: 0.8;
filter:alpha(opacity=80);
top:0;
}
My aim was to center the background ( add a little opacity ), but still have its beginning at the top of the page. Now when the monitor of the user is too large it looks like this
One can see that the image doesn't begin at the top. ( the grey colour is supposed to be a navbar later on but isn't interesting in this question ). The blue colour is part of the background and the white colour is obviously just a wildcard till the background begins to keep the center available. How is it possible to horizontally center the image so it still starts at the top of the page or how is it possible to resize image, so it fits to the users monitor size?
You can use background-size: cover; like explained here.
Simple one, add these:
background-position: center center;
background-size: cover;
More info at Perfect Full Page Background Image.
To have a background always cover the surface of its container, use
background-size: cover;
Related
Odd one this, but I want to have 2 backgrounds on a web page, the first one I want to stay at the top (so scroll in the normal way) and once you scroll, you get the 2nd background.
the 1st background i want to cover the width of the page (so i've used 'cover')
the 2nd background I want to continually repeat. I've tried messing around with the code various ways, here's my code at the moment (which has the 1st bg static, so the 2nd bg is never seen at the moment! Grumble....)
background-image: url(http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg); url(http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg);
background-position: center top, center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
}
The reason I have it fixed is because I make it scroll, auto, or otherwise, the image stretches (because the image is wider than a browser so it can scale up/down on other devices... eventually lol)
Thanks!
Scott
Is this the kind of thing you're trying to do?:
CSS
html, body{
width:100%;
height:100%;
margin:0px;
background-image:url('http://www.scottdaviesdesign.co.uk/hotel/death/bg.jpg');
background-position: center top, center center;
background-attachment: fixed;
background-color:#464646;
}
#div1{
background-image: url('http://www.scottdaviesdesign.co.uk/hotel/death/header.jpg');
background-position: center top, center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width:100%;
height:100%;
}
HTML
<div id="div1"></div>
This essentially overlays the top of the page with a div covering the full width and height of the window which then scrolls with the page.
JSfiddle
I need help and I did not found any proper answer so far. I want to make background image on my website that is full width and height and responsive to any resolution and it is ok but problem is when I put other images ( I have 7 images over background img ). I place them and set with media query for every resolution and it is ok only when is fullscreen but when I watch regularly with address bar and bookmark bar in my browser it all messes around and even my background picture is not full width and height anymore. Sorry for bad English.
CSS for body:
body {
background-image: url('images/background1.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: 100% 100%;
height: 100vh;
margin: 0px;
}
Then I put my images and with margin - left, right, bottom, top place them for different screen resolution in media query.
Do I need to set proper position to images or something else? Please give me a hint.
Edit:
This is what I get in fullscreen and it is ok
But this is when is not fullscreen
All are images except strips, those are part of background image.
Images have only margin style, nothing else. They are in divs with float style.
The easiest way to make background images responsive is this:
img{
background-image: url('.../your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I have a fixed, full screen background. I have another image a few hundred pixels from the top that I want the background to appear to emanate from. Looks good here: http://imgur.com/Rlki1Bk.jpg but when the browser is resized the centre of the background image moves vertically but the foreground image remains fixed so they are no longer aligned. Any help would be greatly appreciated.
EDIT: Some more info. The foreground image is position:relative, and here is the CSS for the background image:
.background {
background-attachment: fixed;
background-image: url('/background.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Hard to tell what's going on without some code, but...
background{
background-image: url("my-image.jpg");
background-position: center top;
background-size: 100% auto;
}
This will ensure that the distance from the top of the window to the other image never changes because the height of the image remains the same, and the position of the image is always flushed to the top. The problem that you'll encounter is that depending on the width of the device your background may stretch.
I have two html pages (index.html and about.html) with the same background in the body tag. I am using the following CSS to create the background:
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
However, the browsers (Firefox and Chrome) are not positioning the image correctly. Since the background color is white, index.html has a white line under the background image. I am assuming that the image height is too short.
Yet, there is a block of white space under the background image of about.html, bleaching over a quarter of the page.
How does this happen when I'm using the same CSS.
While on this topic, what is the best way to manage a background image for different screen resolutions?
Try:
background-size:contain;
contain property scales the image to the largest size such that both its width and its height can fit inside the content area.
The best solution that I can come up with was to use background-attachment: fixed;. This filled the entire background with my image.
I have not figured out as to why my CSS was displaying my background in different ways. This is something to look at.
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
I prefer you first take a small slice of image by photoshop and save it for web and devices or take a small size by snipping tool.Than you will get a small image with small size.
than type bellow code
body {
background-image: url('http://www.skrenta.com/images/stackoverflow.jpg');
background-repeat: repeat;
}
I am trying to implement the following design:
I am having trouble with the red stripe that runs across the page, I'm not sure how to implement that..
I though of using background images, one in the header and one in the right sidebar. The problem is I don't know how to make it so that the stripes connect to each other.
What I tried:
.header {
background-image: url('../images/header-background-2.png');
background-repeat: no-repeat;
background-position: center bottom;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.sidebar {
display: block;
background-image: url('../images/sidebar-tile.png');
background-repeat: repeat;
background-position: center;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
But it doesn't work.. You can see the result here
Any idea how to implement this?
I realized that it would be too difficult to implement this design on a fluid layout. So here is what I did:
on width < 1030, I implement another layout, not in the scope of this question.
For screen widths greater than 1030px, I set a max-width on my content. I now have a fixed width layout that will make it much easier to implement the red stripes.
Here's my code:
.wrap { max-width: 1030px;}
And apply the wrap class on my inner-header, inner-content and inner-footer.
Then:
#inner-header {
background-image: url('../images/header-background-1030-3.png');
background-repeat: no-repeat;
background-position: center bottom;
}
#inner-content {
background-image: url('../images/sidebar-background-1030-tile-2.png');
background-repeat: repeat-y;
background-position: center top;
}
#inner-footer {
background-image: url('../images/sidebar-background-1030-tile-2.png');
background-repeat: repeat-y;
background-position: center top;
}
Note that my background images all have a width of 1030px.
There's no resize problem anymore and the layout keeps in place nicely.
Try creating that image by making a 1x1 pixel in that color ie., rgb(194, 39, 45). Then you can use this image and CSS for the (straight parts) of the background (ie, where the curves are not placed). You can also use CSS entirely by creating divs and border radius (radii?). A 1x1 pixel repeated using CSS is better for a background image bc it will look the same on any device.
maybe i don't understand your question, but if you want the website to be readable in various devices and window sizes; why wouldn't you use divs and style rules?
First let's divide the red part into the first curve at the top left, the menu, and finally the last curve/rest of the red bar. In on div create the first curve as an image, using photoshop or any other photo editor. Then in the next div create the menu bar, with the same red colored background. Finally do the same thing as you did for the first curve to the last part. Use a photo editor to to draw it out as a jpeg and put it into the div. Use css styles to order the divs in place.