I currently have an image that is a specific height and width, how would I set a specific color to run endlessly under the image.
body {
background-image: location;
background-color: #fff;
}
I'd like to background-color to be below the background-image and not all over the page but just under it.
update
html has background-color: #red
body background-image: .png image & background-color: #fff;
I'd like the background-color to not overflow the html color which is the top and just overflow under the background-image from the body.
Use below code:
background:#ffffff url(ImageUrl) no-repeat;
Use this one line code
body{
background:#ffffff url('img_tree.png') no-repeat right top;
}
DEMO
Try this
background:red url(../img/s.jpg) no-repeat center top;
FIDDLE DEMO
or
background-color: red;/*...background colour..*/
background-image: url(../img/s.jpg);/*...image source...*/
background-position: center top;/*...position of background image...*/
background-repeat: no-repeat;/*...it will avoid repetition of image..*/
FIDDLE DEMO
Related
I would like to create a div with a partial background, example:
I tried applying margin in white, but I'm a bit lost.
You didn't write any code in question. So i writing example Html and CSS code now. I hope this code will has solve your problem.
body{
background-color: #e3e3e3;
}
.bg-container{
background-image: url("https://i.stack.imgur.com/Q9aDy.jpg");
width:250px;
height: 250px;
background-color: #fff;
background-repeat: no-repeat;
background-size: 200px;
background-position: center center;
}
<div class="bg-container">
</div>
You can use background-size: width height; and background-position: x y; to specify the space the background occupies within the div.
A gradient is an image, so you can add one and manipulate it as a color. Use background-color to specify the background you want to use behind it. background-repeat: no-repeat ensures that it is used only once.
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: 50% 50%;
background-image: linear-gradient(white, white);
background-color: black;
The background-position values specify the horizontal and vertical positions, respectively. Use 50% 50% to center it.
I am doing a padding for my body tag like this because I am using a nav bar fixed top. I want the nav bar to always stay on top.
body {
padding-top: 70px;
}
Now I want to add a background image to the body and want it to cover the entire screen. So I do this.
body {
background: url(background.jpg);
background-size: cover;
}
But the problem is that the nav bar covers parts of the image, the 70px padding is not working on the background image. Please help fix this.
Position the background 70px down using the offsets available in background-position
Background-Position # MDN
body {
background-image: url(http://www.fillmurray.com/g/200/300);
background-position: top 70px center;
background-size: cover;
background-repeat: no-repeat;
}
By default, background does cover the padding, yes.
So one possible solution would be to use background-origin to tell the browser the background should start in the upper left of the content, rather than the padding area.
html {background:white; height:100%}
body {
box-sizing:border-box; min-height:100%;
padding-top:70px;
background: url(http://www.fillmurray.com/g/200/300);
background-origin: content-box;
background-size: cover;
background-repeat: no-repeat;
}
This one would have the advantage of being dynamic; i.e. you wouldn't need to change its value if changed the value of the padding.
I want to avoid the repeat of a background image. It seems something is wrong in the code below because it does not work. It always repeats. I Want left top no repeat
Code
body {
background: url(../images/bg/bgheleneLogo.JPG)!important;
}
Use background-position Property & background-repeat Property
The code will work fine for you
body {
background-color: #000000;
background-image: url('../images/bg/bgheleneLogo.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-x:top;
background-position-y:left; }
I can't seem to get the background-image property to work. I am trying to add images to the borders of my button, but it is not working. Here is the http://jsfiddle.net/Bchga/.
HTML
Image Borders
CSS
a {
text-decoration: none;
color: #fff;
}
.btn {
float: left;
display: block;
padding: 10px 30px;
background-color: #67b8de;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") no-repeat right bottom;
}
Your background-image rule also contains values for background-repeat and background-position. Separate them (or you can put the colour in too and use the background shorthand):
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png");
background-repeat: no-repeat;
background-position: right bottom;
Okay I went over the documentation on https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
The new CSS
.btn {
float: left;
display: block;
padding: 10px 30px;
/* Notice that I list all the images */
background: url("../img/border-top-left.png"), url("../img/border-top-right.png"),
url("../img/border-bottom-left.png"), url("../img/border-bottom-right.png");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
background-color: #67b8de;
}
You will notice that I use the background: property, you can also use the background-image property, thanks for the tip minitech. You also should notice that you can't just specify individual image is you want to target all the corners of the button. Example:
background-image: url("../img/border-blah-blah.png");
background-repeat: no-repeat;
background-position: top right;
This will not target all of your corners, but only one corner will be targeted this is because of the cascade it will overwrite the previous rule, that's why you have to input the sources for all your images at once and then target them. Also you should put the background-color property last, because the color won't be applied if it is the first rule. I don't know why that happens.
You background image is too large:
it's working with a background image at 10%..: Link JSFiddle
background: #ff8844 url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") 10%
I am using this CSS to put an image into the <body>:
body {
background: url('picture.png') no-repeat;
background-size: contain;
}
The image is displayed at the top of the browser window, but I need to place this image a few pixels from the top.
I've tried using padding/margin-top: 20px;, but it didn't help me, the image is still at the top of the browser window.
How can I move this background image for the body tag a few pixels down from the top?
Note: I need to have the picture in the body tag.
You need to use background-position instead.
body {
background: url('picture.png') no-repeat;
background-position: 0 20px;
background-size: contain;
}
You can use css background-position property,
example
body {
background: url('picture.png') no-repeat;
background-position: 0px 50px; /* This makes the image appear 50px from top */
background-size: contain;
}