This question already has answers here:
Background Grey
(2 answers)
Closed 9 years ago.
I have set a background image on my website, in some browsers there come grey blocks in the background image. How do I solve this?
Website: http://haptotherapiemris.nl/
Here is my Css code:
.main {
margin: 0 auto;
background: transparent url(http://dansolution.nl/klanten/background/bg.jpg) repeat-y center top;
width: 1000px;
min-height: 1000px;
text-align: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
if you mean the grey color to the right and left of your bg image... then you can remove it from the body { css file.
body {background-color:#595959; ...... }
to be
body {background-color:#ffffff; ..... }
Related
This question already has answers here:
Make body have 100% of the browser height
(24 answers)
Closed 6 months ago.
I have recently been creating a link in-bio page and I am trying to make the background image cover the whole screen but it is only covering parts of the screen where I have objects like a header or list. Below I have the CSS code that I used to insert the background image.
body {
background: url(./942775.png) no-repeat center center fixed;
background-size: cover;
}
It's likely that your body element is not the full size of your viewport. Try stretching html and body to the full window:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: url(https://www.nasa.gov/images/content/296150main_2-226.jpg) no-repeat center center fixed;
background-size: cover;
}
main {
color: white;
}
<main>Hello world</main>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 8 months ago.
I want the image to fully cover a section, however, get an unwanted white border around it.
If I style the element, the white border isn't present, but the moment I try to do the same for a element, a white border/margin/padding appears.
Already tried setting margin, border, and padding to 0, yet the border remains around the image.
<--CSS Code-->
section {
min-height:100vh; width:100%; margin:0; padding:0; border:0;
background-image: url(https://images.squarespace-cdn.com/content/v1/54e7a1a6e4b08db9da801ded/7f2dae36-5650-4b84-b184-684f46fe68aa/98.jpg?format=750w);
background-position: center center;
background-repeat:no-repeat;
background-size: cover;
position:relative}
(If I replace section with body, the border is gone/'problem solved, however I want to style section, not body)
Make body (or the container of the section) with margin 0
section {
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background-image: url(https://images.squarespace-cdn.com/content/v1/54e7a1a6e4b08db9da801ded/7f2dae36-5650-4b84-b184-684f46fe68aa/98.jpg?format=750w);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative
}
body {
margin: 0
}
<section>
</section>
This question already has answers here:
Stretch and scale a CSS image in the background - with CSS only
(22 answers)
Resize image proportionally with CSS? [duplicate]
(18 answers)
Closed 3 years ago.
I am incredibly new to coding and am looking to autofit an image within a div in CSS. The code I've written just adds the background image in the CSS for the div, so haven't referenced the image file in the main HTML code.
Is there a way to resize the image within the div CSS or do I need to separate it out into div CSS and then image CSS (I hope I'm making sense!).
Or if there is a completely different way of doing it more efficiently please let me know - Any help would be greatly appreciated!
.test {
border: 2px dashed #0087F7;
background-color: #DCDCDC;
background-image: url('download.png');
background-repeat: no-repeat;
background-position: center;
}
You can use the properties contain and cover in background-size to manipulate the background's size. You can also set a percentage.
div {
width: 150px;
height: 50px;
display: inline-block;
border: 1px solid;
background: url("https://picsum.photos/150/150");
background-repeat: no-repeat;
background-position: center;
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}
<div class="cover"></div>
<div class="contain"></div>
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 6 years ago.
So I wanted to make a site where I could have the background have a header image of say 600px image, that being the "site background," then having the rest be a tiled image, as well as that I wanted the header background to adapt to movement, like background-position: center; CSS property.
I looked at W3 but their documentation is confusing. here
This is some code I tried:
background: url(bg.png) top, url(tile.png) repeat;
But I'm not sure how I'd be able to add background-position & height into that.
Short example:
.web {
width: 800px;
height: 1000px;
background-image: url(https://dummyimage.com/800x600/000/fff), url(https://dummyimage.com/800x300/555/fff);
background-size: 300px 200px, 300px 100px;
background-repeat: no-repeat, no-repeat;
background-position: center 0px, center 200px;
}
<div class="web"></div>
This question already has answers here:
Vertically centering image in a div tag [duplicate]
(4 answers)
Closed 7 years ago.
If you reed carefully this question you'll note IT'S NOT A DUPLICATED QUESTION. This one is about an image over a responsive background with full height image display. The answers related to the other questions are useless here. Thanks to jacob for his simple solution.
The issue:
I have a DIV with a responsive background. I'm trying to place a centered png "logo" over the DIV (or the background, if you prefer). That's what I have:
.divWithBG {
background-image: url(...);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 45.45%; /* (h/w) x 100 */
margin-bottom: 30px;
}
.divWithBG img{
display: block;
margin: 0 auto;
}
¿What I need to do to place the image inside the div? Centered both, vertically and horizontally.
Many thanks in advance.
You could just make it simpler and use 2 background images. Multiple background images in CSS:
.divWithBG {
background-image: url("http://lorempizza.com/380/240") , url("http://lorempizza.com/2000/2000");
background-size: 50%, contain;
background-repeat: no-repeat, no-repeat;
background-position:center;
width: 100%;
padding-top: 45.45%; /* (h/w) x 100 */
margin-bottom: 30px;
}
<div class="divWithBG"></div>
The background image you want to be on top comes first in the background property.