I am working on a modal wherein there's an image background. Now, the image is not filling the entire div. Here's what I currently have in my css:
CSS:
.modal {
border-radius: 10px;
min-width: 65vw;
min-height: 40vh;
border-width: 5px;
border-style: solid;
border-color: var(--secondary);
background: url("../../../assets/cloudy.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML:
<div class="modal"></div>
Whenever I replace the background with a color, it works. Here's what it currently looks like with background image vs with color:
I've tried changing background-size to contain and 100% 100%. It didn't work.
Is it a problem concerning the image? Because the image is very long. 1942 × 478 to be specific. Thanks in advance!
i have tried most of the pics on my laptop and it seems to work just fine.
.modal {
border-radius: 10px;
min-width: 65vw;
min-height: 40vh;
border-width: 5px;
border-style: solid;
border-color: var(--secondary);
background: url("https://media.mnn.com/assets/images/2018/08/CollectionOfCloudsAgainstABlueSky.jpg.653x0_q80_crop-smart.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="modal"></div>
</body>
</html>
if you put a link of the image in code instead of the local file name i can help. but maybe its a png problem because the top and bottom could be see trough. (also i cant comment so this is the best way to communicate, sorry.)
Related
So, I'm working on my first website which at this point is nothing more than a background picture, an image, and a password input section that is not yet functional. So far all is good tho mostly. The background image is flush with the screen, the image is centered, as well as the input. The issue comes when I zoom out.
As seen here when I zoom out the background image duplicates.
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
}
.content {
margin: 0 auto;
position: relative;
width: 500px;
z-index: 999;
}
<!DOCTYPE html>
<html>
<head>
<title>The Sandbox</title>
<meta name="description" content="">
<meta name="author" content="Hades">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style.css"/>
</head>
<body>
<center>
</div>
<img src="signature.png" width="700" vspace="100" border="0" alt="Hmmmm 404?">
</div>
<form>
<input type="password" style="background: ghostwhite; font-size: 18px; border: 1px solid lightgray; width: 500px; border-radius: 50px" />
</form>
</div>
</center>
</body>
</html>
Any solution to this or am I just gonna have to bite the bullet?
Give These two properties
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
To stop image from repeating "background-repeat" and to size for appropriate size "background-size"
You may need something like that. While using background-image, background repeating is by default on - so you need to set background-repeat property to no-repeat. And you need to adjust the background size and position as well as defining height of 100% for it and it's parent(in this case body).
html, body {
height: 100%;
}
#bg-image {
background-image: url("https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
background-repeat: no-repeat;
height: 100%;
background-size: cover;
background-position: center;
}
#form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#form input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<body>
<div id="bg-image"></div>
<form id="form">
<input placeholder="write here..." >
</form>
</body>
well your code is ok but when you use background-image by default it is going to repeat image until it fill element. you have to use background-repeat: no-repeat; to prevent it and take note it is not good at term of responsive to give body a background-image better use div instead. you can also use background-size: cover; to make sure image always fill whole element
you need to set the background-repeat property to no-repeat, background-size to cover, and background-position to center center.
background-repeat: no-repeat--> will make the background image is only shown once.
background-size: cover--> make the background image cover the entire background area.
background-position: center center--> make the background image be positioned in the center of the element (in this case, the body element)
body {
background-image: url("Background.png");
height: 100%;
width: 100%;
/* extended code */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
You may need something like this. You can make it easy with display:flex and for background you can use no-repeat.
html, body {
height: 100%; // FOR HTML AND BODY HEIGHT
}
body {
background: url("https://ak.picdn.net/shutterstock/videos/1027045598/thumb/1.jpg"); /* BACKGROUND IMAGES */
background-repeat: no-repeat; /* NO REPEAT BACKGROUND IMAGE */
height: 100%; /* BODY HEIGHT */
background-size: cover; /* BACKGROUND SIZE */
background-position: center; /* BACKGROUND POSTION */
display: flex; /* FLEX FOR TAKE DIV IN CENTER */
justify-content: center; /* LEFT RIGHT CENTER */
align-items: center; /* TOP BOTTOM CENTER */
text-align: center; /* TEXT AND IMAGES CENTER */
}
input {
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
border: none;
}
<div class="center">
<img src="https://www.nicepng.com/png/full/166-1667158_dan-howell-signature-png-vector-black-and-white.png" width="150" vspace="20" border="0" alt="Hmmmm 404?">
<form>
<input type="password" style="background: ghostwhite;
font-size: 18px;
border: 1px solid lightgray;
width: 500px;
border-radius: 50px" />
</form>
</div>
Here I create one simple demo.
I hope it's help you :)
i was put .svg file as background image.
in small screen it was ok, but when i show in large screen it was cut from top and bottom
i want to show background image in full height/width as original size in large and all screen
demo image
-here is my code
.bg {
width: 100%;
height: 540px;
background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
float: left;
width: 100%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
</body>
</html>
You have to make the div height = pageHeight(header height and appropriate margins should be minus).
.bg{
width: 100%;
height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
Think it has to do with the background-size.
Maybe this works better for you? (practically the same, btw if contain isn't what you want try cover.
background-size: contain;
background-repeat: no-repeat;
background-position: center;
could you prehaps show what you want with an image.
I have a PHPBB theme I am starting to construct. In the CSS file, I have three items--a body and two divs--with background images. The background images for the divs have ceased working in all browsers.
The site with the theme presented is here: https://www.tarazedi.com/index.php?style=7
The problem images are here: https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png
The CSS is located in wTcFresh/theme/.
The images are all in the same locations but there seems to be a pathing issue but is working very strangely. I have tried using both relative and absolute URLs. I have tried url(x);, url('x');, and url("x"); and also changing the other background elements. In no case have the banner and logo images started working, but the body image works fine despite being in the same place and using the same syntax. When I inspect the computed styles of the divs in Chrome the image will show as the full absolute URL correctly but the relative link links instead to tarazedi.com/images/site_banner.png which returns a 500 error because that URL is, obviously, useless. In Edge and Firefox the inspector shows the correct link to the image but still does not render.
I have cleared browser and site-side caches with each attempt I make to fix it.
I am baffled. What am I missing?
body {
color: #CCCCCC;
background-color: #000000;
background-image: url("images/bg.jpg");
background-attachment: fixed;
}
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url("images/site_logo.png");
background-attachment: fixed;
background-position: left center;
vertical-align: middle;
}
To achieve expected result,adjust background-position and it is not issue with the background-image
1.Remove background:position to see the difference
Editing it thusly fixed the problem and it now renders correctly. Thank you very much!
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
background-image: url("images/site_logo.png");
overflow: hidden;
background-repeat: no-repeat;
background-position: left;
align-items: center;
}
I assigned a background image to a section using css and the image only shows up in live preview in brackets. Is this supposed to happen or I did something wrong. Here's The Code:
background: url(/img/background.jpeg) center center no-repeat fixed;
background-size: cover;
I changed the path to:
background: url(../img/background.jpeg) center center no-repeat fixed;
background-size: cover;
putting the two dots worked for me!!
Maybe you can try something like this-
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;}
<img src="example.jpg" alt="example">
Or this-
body {border-style: groove;border-width: 3px; border-color: Black;
width:1300px; padding: 25px; background-color: Aqua;
background-image: url("NSIC-logo1.png");
background-repeat:no-repeat;background-position:50% 10% }
Before posting it over here, I have done thorough research work on my question but I haven't found any suitable answer to it.
How do I post an background image in a textbox using CSS?
Am using IE11.
The below is the code which am using
<a href="#">
<div id="imagecontainer"></div>
<style>
#imagecontainer {
background-image: url("content\A.png") no-repeat;
background-size: cover;
background-size: contain;
width: 10%;
height: 10%;
border: 1px solid;
}
I have tried many possibilities to sort it out but am unable to. The box is going to be displayed but not the image in the backgorund in my code.
Can any of you suggest me whats wrong in it please.
if you are trying to reference a url in a different directory use the following:
#imagecontainer {
background-image: url('Images/example.jpg') no-repeat;
background-size: cover;
background-size: contain;
width: 10%;
height: 10%;
border: 1px solid;
}
Try like this: Demo
input {
padding: 9px;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 10%;
height: 10%;
border: 1px solid;
background: #FFFFFF url('http://nettuts.s3.amazonaws.com/584_form/bg_form.png') left top repeat-x; /* make sure about the image path you mentioned is right */
}
And I didn't saw any textbox code in you HTML. As you mentioned, I showed simple example for textbox with background image. Hope this is what you want.