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% }
Related
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.)
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 am having trouble getting a background image to show in a div and can't for the life of me see why...
This is the structure that I have:
Folder
\style.css
\index.html
\Images
\bookone.jpg
I want the bookone.jpg file to be the background of a div.
So the CSS path would be Folder/style.css and the image path is Folder/Images/bookone.jpg. I have the below code in my html and css file but I get nothing when previewing it.
/* CSS */
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(..\Images\bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<!-- HTML -->
<div id="bookone" class="book"></div>
You should use slash (/) and not backslash (\).
You should make sure the image is in the correct path (relatively to the current css/html file).
If the images exists in the same location of your css file (or your html file) you shouldn't use the .., since it actually tells your browser to search for that image in the upper-folder.
This is the final css code you should probably use:
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(Images/bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
just writing my comment as answer as this help OP to solved the problem
try url(Images/bookone.jpg) in ur css file
It appears like the image you want have as a background is in another folder away from where the CSS is. I suggest you assign the background image from the HTML code. Use the forward slash (/) and not backslash (\).
E.G
<div id="bookone" class="book" style="background: (url('/myimage/bg.jpg')"></div>
or on css
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(./images/bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
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.
I have a square image, and I'd like to put it inside a circle border. How can I make it so that the entire image fits instead of its corners getting cut?
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png');
background-size: contain;
}
Here it is on jsfiddle.
You need to shrink the image slightly to make it fit within the circle. To calculate the exact size, divide the diameter of the circle by sqrt(2). In this case, 200px / sqrt(2) is about 141px.
Thus, add the following properties:
background-size: 141px;
background-repeat: no-repeat;
background-position: 50%;
JSFiddle
Note that the blue block doesn't touch the circle because the image has a transparent border.
UPDATE: As cassiorenan correctly points out, using a percentage allows the image to automatically scale if you change the size of the circle. Since 1 / sqrt(2) = 0.707..., you can use 70.7% instead of 141px:
background-size: 70.7%;
Change the background size to a percentage(So it will still have the same relative size ragardless of you changing the circle's width/height.) and center it. While you're at it, tell it to not repeat.
On your particular case, this code works:
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png');
background-size: 90%;
background-repeat: no-repeat;
background-position:center;
}
Edit: Fixed code formatting.
As I said in my comment you must remove transparent border/space around the image or if you don't wanna do that then use this CSS
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png') center;
background-size: 130%;
}
Give the background a size like background-size: 100px; then position it in the center of the div and tell it not to repeat:
background-size: 100px;
background-position:50%;
background-repeat:no-repeat;
The coding should now look like this:
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png') ;
background-size: 100px;
background-position:center center;
background-repeat:no-repeat;
}
JSFiddle Demo