I have a centered image in the background, but I need my main background-color to stretch as much as the image and stay at the center.
Here is the css for body background
body{padding:0; margin:0; background:url(/b.jpg) center 10px no-repeat;}
Here is the css for main background
.main{background:#4e4645;}
Ive tried background-position and margin percents with no luck.
You can use margin: 0 auto to center your .main div within the body. Then all you need to do is set the width of .main to be equal to the width of your body's background image.
.main {
margin: 0 auto;
width: 300px;
background: #4e4645;
}
See DEMO.
Is this what you're trying to achieve?
http://jsfiddle.net/aX24s/1/
In the example I'm using two background colours, obviously substitute an image in. I've put 50% opacity on the inner div to show that they're both exactly matched in size (one block is bright green, one is red, so the colours mix).
You have the two backgrounds the same size and overlaid exactly.
HTML:
<body>
<div class="outer_div">
<div class="inner_div">
</div>
</div>
</body>
CSS:
.outer_div {
width:50px;
margin:0 auto;
height:50px;
background-color:#dd0000;
}
.inner_div {
background:#00dd00;
width:100%;
opacity:0.5;
height:100%;
}
Related
I'm trying to apply an overlay on top of a background-image, where the image has an attribute background-size: contain. For the overlay that I want to apply on top of it, it doesn't have a background image. All it has is a black background color with an opacity:
.overlay {
background-color: black;
background-size: contain; /* this isn't working */
opacity: 0.5;
}
The image that I want to overlay is 600x600. I want the same to be applied on the overlay too, but I can't because it's not an image; it's simply a black background. How can I get the same square dimensions for the overlay without setting a hard-coded width and without using background-size: contain?
if you want an overlaying transparent div check this out. I usually do it this way. i have a container div containing my background image and black colour div with required opacity to 0.5 (or any other value).
working fiddle https://jsfiddle.net/am2hyf3d/
set the containers width and height to a fixed value
#container{
height:300px;
width:300px;
}
i set the width and height of both the divs inside the container to occupy the containers entire space
#overlay{
height:100%;
width:100%;
background-color:rgba(0,0,0,0.5);
}
If you want simply for the image to come out darker than it really is, you could put it in a container with a black background and give the image itself a 50% opacity.
By making the container an inline-block, it will shape itself to the size of the image inside, so you won't have to specify an explicit size.
.container {
background:black;
display:inline-block;
}
.container img {
opacity:.5;
vertical-align:top;
}
<div class="container">
<img src="https://i.stack.imgur.com/30Bby.jpg">
</div>
For reference, the picture itself looks like this:
a few ways to darken a background-image without an extra element:
div {/* commun css for demo divs */
width:180px;
height:180px;
margin:10px;
background-image:url(http://lorempixel.com/180/180);
color:white
}
.gradient {
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(http://lorempixel.com/180/180);
}
.shadow {
box-shadow:inset 0 0 0 180px rgba(0,0,0,0.5);
}
.blend {
background-color:rgba(0,0,0,0.5);
background-blend-mode:multiply;
}
/* extra for layout */
div {
display:inline-flex;
vertical-align:top;
align-items:center;
justify-content:center;
text-align:center;
font-size:2em;
}
<div class="gradient">darken gradient</div>
<div class="shadow">darken shadow</div>
<div>plain normal</div>
<div class="blend">darken blend-mode</div>
I have a background image problem with medium screen and lower...
i tried background cover property but it adds horizontally white space bottom of image
how i fix that...?
the html is here
html
<body class="bg">
<div class="container">
<div class="box"></div>
</div>
<body>
CSS
.bg{
background-image:url(http://themes.siiimple.com/360/wp-content/uploads/2012/07/FreeGreatPicture.com-18429-hd-color-background-wallpaper.jpg);
background-repeat:no-repeat;
background-size: cover ;
}
.box{
height:400px;
width:88%;
background:#C5C0C1;
opacity:.5;
margin-top:50px;
}
http://jsfiddle.net/azhrhussain/1xtvvfL8/
You're using the background-size property correctly, but your body element isn't reaching the bottom of the window. Just add this to your html:
html {
height: 100%;
min-height: 100%;
}
http://jsfiddle.net/1xtvvfL8/4/
To avoid whitespace, add:
html,body {
margin:0;
padding:0;
}
It'll remove any automatically-applied margins or padding by the browser to your page.
On my site a have a div, inside the div I have different images width different width's and height's. I want the image to be in the center no matter what size or shape. Lets say the div is 200px * 200px. All images need to have min-width:100%; and min-height:100%; so that there is no white in the background. So basically I want the center of the image to be in the center of the div. How do I do it?...
<!DOCTYPE html>
<html>
<head>
<style>
.div{
width:200px;
height:200px;
overflow:hidden;
box-shadow:0px 0px 5px #000;
}
.img{
/*What shall I put here?*/
min-width:100%;
min-height:100%;
}
</style>
</head>
<body>
<div class="div">
<img class="img" src="img.jpg">
</div>
</body>
</html>
You would be best setting the image as a background of the div and using setting the background position.
This is a duplicate question. The answer, as referenced here, is to display the image as a CSS background-image rather than using an img element and set it to display in the center:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
}
To ensure that your image is as least as large as its “containing” element you can use the background-size property, which accepts a number of different properties. The one you want is cover, which instructs the rendering engine to stretch the image so both dimensions of the image are at least equal to that of the element:
div.with-background-image {
background: url(/path/to/image.jpg) no-repeat center center;
background-size: cover;
}
If my browser window is large enough, the web page is fine. If it is smaller and I scroll to the right, my backgrounds don't go horizontally across the entire browser window. They stop inside the webpage. I have made the body background blue so you can see where the background is ending. I want to make it so the actual content and background pictures end where the browser window ends and have there be no blue. The site is up at avidest.com/schneer. Here is the CSS:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
And here is the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="slider">
<div class="gallery">
</div>
</div>
</div>
</div>
Thanks.
You have contents that go beyond the .main div.
If you add in your div.main { overflow: hidden; } you will see that it works as expected, because nothing is pushing it to a bigger width than expected.
for 100% height, you need html and body tags to be 100% also
add this to your CSS
html, body { height: 100%; width: 100%; }
you would then have to create a fake background out of a 100% by 100% wrapper div and place your background within that to get the effect you are looking for
Why do you have .main class? Didnt you forgot some elements?
In your .header, you set up background and width 100%. so the width of element with .header class will be 100% of its parent element. Whats the parent element of <div class="header">?
I see a huge amount of variance in your widths. I would think "main" "header" "block_header" all would be the same width. Also note that 100% is not 100% of the parent element it is 100% of the window size especially when the parent element is larger than the window. Set the widths to a definitive numbers. If you want the content to fill the users screen then set the parent to 100% first and then all the child element can be set to 100% to fit the parent elements width.
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div