I have this image on my website, but when I zoom with the scroll, the image becomes blurred. So, what I need it is not resize when I zoom.
This is my CSS code:
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
The image must be repeated on the screen.
body
{
margin: 0;
color: #bbb;
font-size: 0.9em;
background-color: #202121;
background-image: url("img/wild_oliva.png");
background-size: initial;
}
img{
max-width: 100%;
height: auto;
}
You might want to try something like this and see if it works.
Related
I have a background image that's about 1200 (w) x 800 (h) but i just want to use the whole 100% resolution for it. I have a button inside this div container but it's not displaying correctly. The background image won't expand to it's full resolution. It seems like it's only showing enough to allow the button to show.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
width: 100%;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
here's a little picture demonstrating what's going wrong vs what i want:
This has nothing to do with background image not expanding. Your div is simply not tall enough to show more of the image. Going off of your diagram, you want to add some padding to .endFoot.
background-size: cover; is a good choice, but you may also want to consider centering the position with background-position: 50% 50%;.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
If you would like the endFoot div to have the same height as the background, just set the height to 800px, because 100% doesn't change anything in this case.
Also set the endFoot position to relative in order to put the botton to the correct position.
If you are trying to achieve full screen background try :
.endFoot {
width: 100vw;
height: 100vh;
}
For browser support informations of vh and vw units check : https://caniuse.com/#feat=viewport-units
Just add text-align:center to .endFoot class to make center button and add some margin to .customButton class for leave some space to bottom.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0px;
height: 100%;
position: relative;
text-align: center;
}
.customButton {
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
margin-bottom: 10px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
The background image is covered by white area when you scroll all the way to the bottom. Cannot seem to figure out what it is. Played with each of the selectors and HTML. Would appreciate help. Please click link go to the CodePen where the code is visible.
https://codepen.io/siamazing/pen/QaGdWq
html, body{
height: 100%;
}
#body {
background-image: url(https://images.pexels.com/photos/267278/pexels-photo-267278.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
height: 100%;
font-size: 15px;}
.container-fluid {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
height: 100%;}
h2 {
padding-left: 20px;
font-family: 'pacifico';
font-size: 22px;
color: #72777f;
}
header {
text-align: center;
font-family: 'pacifico';
}
article {
font-family: 'raleway';
background-color:rgba(255,255,255,.4);
color: #303338;
padding: 10px;
margin-top: 20px;
margin-left: 30px;}
Remove height:100% from #body
https://codepen.io/mirohristov/pen/MrbmWj
See Miro's answer, but here's some troubleshooting advice.
I added * { outline: 1px dashed red; } and saw this:
That made it easier to find the culprit element - #body and remove the height:100%; rule.
How do I remove the grey background around my picture?
Here's how the page looks right now: http://imgur.com/w52pfhn
.header {
text-align: center;
font-size: 50px;
font-family: sans-serif;
font-style: bold;
color: white;
background-color: white;
background-image: url("https://dummyimage.com/vga");
padding: 10%;
margin: 0%;
border: 0%;
}
body {
background-color: grey;
}
<div class="header">
<h1>Hello</h1>
</div>
By default the body has margin, so:
body {
margin: 0;
}
maybe try to remove the color of background?
background-color: grey;
Remove this snippet of code:
body {
background-color: grey;
}
Hope it helps!
Set the parent element 'height, width' same as that of the image, and set overflow: hidden; to that parent element, which will cut out the grey area.
Your background-image needs to fill perfectly the header to hide the grey background.
Try with :
.header {
background-size:100% auto;
}
or
.header {
background-size: cover; /* or contain */
}
Hope this helps
I'm designing a page for my blog, and I discovered that when I have my div.page-content within the body, it's glitching out and resizing the whole body to the top of the div... I need the body to fill the viewport no matter what.
Relevant HTML
<body>
<div class="page-content"> <!-- THIS IS MY .page-content DIV -->
asdasd
</div>
</body>
Relevant CSS
body, html {
height: 100%; width: 100%; /* Shouldn't this make the page guaranteed to fill the viewport? */
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px;
margin: 60px auto 30px auto;
background-color: blue;
}
JSFiddle: http://jsfiddle.net/deansheather/5et5kgsn/
I have not an idea if there is a javascript way to fix this, but I'd prefer CSS and HTML only answers please.
I'm sorry about the really weird explanation, it's what came into my head.
You have to set the .page-content class height to auto. Think your problem solved.try this:
body, html {
margin: 0; padding: 0;
background-color: #fdfdfd;
font-family: Roboto, Arial;
color: #424242;
background-repeat: no-repeat;
background-size: cover; /* I'm gonna have a blurred background image */
}
.page-content {
min-height: 300px; width: 600px; height: auto;
margin: 60px auto 30px auto;
background-color: blue;
}
I'm trying to create a gradient background, and then a solid color box in the center and then type text in it. My code is below, works great but the solid color box (body) isn't flush with the top of the browser, there is a little space between. How do you get rid of this?
html {
text-align: center;
background-color: #FFF;
background-image: url(../../Public/Documents/Business/Running%20Companies/Enlightenment%20Project/Website/images/bg.jpg);
background-repeat: repeat-x;
margin: 0px;
}
body {
background-color: #FFFFFF;
height: 768px;
width: 1024px;
margin: auto;
}
**Update
Working Code Below:
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
background-color: #FFF;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
/*
* Removes default margin.
*/
body {
margin: auto;
background-color: #FFF;
height: 768px;
width: 1024px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 25px;
}
As #loktar commented, try a margin: 0 for the body (sorry #loktar, new here)
I suggest using normalize.css within all your projects to get rid of these little issues.