The following is the structure of the code of my website.
<body class="xxx">
<div id="top-header">... code ...</div>
<div id="wrapper">... code ...</div>
</body>
And this is the CSS code I use for a background image.
body {
background-image: url('http://example.com/background-image.jpg');
background-position: top right;
background-repeat: repeat;
}
The problem I have with this is, about 50px of the background image is hidden under the "top-header" div, which is 50px in height (It's the menu). How do I adjust the code so that the background image shows properly, fully below the menu (top-header)?
Just so, you know, I tried this css code as well:
#wrapper {
background-image: url('http://example.com/background-image.jpg');
background-position: top right;
background-repeat: repeat;
}
And this changed the white background of my content to the image. Which is not what I want.
The only way is to move the starting point of background-image 50px down. How do I define that? Please try help. Thanks.
Sorry guys, this was easy. I actually followed the CSS Twitter uses for background, and I got it. I just had to replace "top right" with "right 50px" where 50px is equal to the margin you'd like to leave at the top of the background image.
body {
background-image: url('http://example.com/background-image.jpg');
background-position: right 50px;
background-repeat: repeat;
}
cheers!
use this in style:
background-position: calc(100% - 30px) center;
example:
body {
background-image: url('http://example.com/background-image.jpg');
background-position: calc(100% - 30px) center;
background-repeat: repeat;
}
instead of 30px you can change the pixel value for positioning the background image.
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.
Am trying to position my svg image to the corner of the screen. I have tried to add the background-position: top left; property but it didn't work. I have included my code and a picture of how it looks in my browser. I am still trying to figure out what is the problem.
https://imgur.com/a/nnO7WRY
.div1{
background-image: url(../images/back.svg);
background-repeat: no-repeat;
background-size: 100%;
background-position: top left;
height: 100vh;
}
<div class='container'>
<div class='div1'>
p
</div>
<div class='div2'>
p
</div>
</div>
Thanks!
probably, this the image itself, it (svg) itself has the margins, try this, in .div1 with preferable values:
.div1 {
background-image: url(../images/back.svg);
background-repeat: no-repeat;
background-size: 100%;
background-position: top left;
height: 100vh;
transform: translate(-10px,-10px);
}
i dont know exact values of pixels, you need to change them..
i hope it helped :)
NOTE: this answer can only help if the svg has margins, otherwise refer to other answers
Enter CSS property for "background-origin" with value of border-box which places the image relative to border box and not default padding box.
I'm building a website from CSS and HTML. I'm up to the point of adding a background image to my website. The trouble is, the image isn't showing up as the website's background.
My CSS code:
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg"></div>
Just ask me if you need any more code from my website.
Edit: This is not a clone, I've tried every other solution that I've come across on here, and nothing works.
This works fine if you use fixed height:
In the below case I have used 100px;
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
But if you want it to be 100% of the screen you can always go with 100vh
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
If you want to know more about vh visit this link
Hope this was helpful for you.
The background image for a page can be set like this:
body {
background-image: url("paper.gif");
}
so maybe you can change your code become :
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
If you want to add background image to whole HTML Page then use body tag.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg");
}
and if you want to add background to specific class then use this
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg');
}
in that adjust your height accordingly. if you want to add to full class then use
height:100% else adjust it with your own condition.
The image that the OP refers to is a resized version of the original. This solution uses the original image along with CSS that uses a height of 100vh (as recommended by #weBBer) and auto for the width. The background position remains with a center value. It seems needless to repeat the image so the CSS uses no-repeat. This works with Google Chrome (version 49).
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
width:auto;
height:100vh;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
<div class="bg"></div>
The result is a centered image that fills the page due to background-size property being set to cover as well as the height property set to 100vh, i.e. 100% of the view port height; see more about this and other measurements here.
If you only wanted to fill the portion within the dimensions of the DIV then you could alter the CSS and replace background-size property with object-fit, as follows:
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
height:480px;
margin-left:auto;width:100%;margin-right:auto;
background-position: center;
background-repeat: no-repeat;
object-fit:cover;
}
<div class="bg"></div>
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 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;
}