I want to set a background-image, but it doesn't show up on my site. I have tried to set display: block; but that didn't work.
body {
background-image: url("images/other/background.png");
margin: 0;
}
You probably have the wrong path. If your CSS file is inside /css and your image file is inside /image you should use
background-image: url("/images/other/background.png");
Related
Good morning, I'm working in a project and I need to put a background image inside a div below the navbar, so I putted the Background-Image property and the url.
But when I load the localhost page I don't see the image displayed as I wish. I tried to put the url directly inside the div as style property and putting it as a URL::asset, but also didn't work. If someone can help me it would be great!
Here you have the div i created in the blade file:
<div id="backgroundImage">
<h1>THE PLANET FOR WOMEN ENTREPRENEURS</h1>
</div>
And here you have the CSS:
#backgroundImage{
background-image: url('/public/storage/images/backgrounds/Coworking.JPG');
width: 100vh;
height: 100vh;
}
The images are saved in that route, is the absolute path, not the relative.
But when I load the page this is the display:
The base path is public so you don't have to put it in the path. Just remove /public from the path:
#backgroundImage{
background-image: url('/storage/images/backgrounds/Coworking.JPG');
width: 100vh;
height: 100vh;
}
Try this:
#backgroundImage{
background-image: url({{asset('/storage/images/backgrounds/Coworking.JPG')}});
width: 100vh;
height: 100vh;
}
I think this works fine.
You have to put your images folder (as the backgrounds folder name you are using) in the public folder.
Now in the CSS file:
background: url('/images/backgrounds/Coworking.JPG');
In my case I just deleted storage folder in pulblic folder and reset the symbolic link using php artisan storage:link
.w {
background-image: url('https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg');
}
<button class="w drum">w</button>
I have been trying to use my Atom editor to create background images for my website and it hasn't been working but we I should use it inline on the HTML file, it will work, I won't to use it on the HTML file. I want to keep the file separate from each other. Please I need your assistance
This could fix your issue!
background-size: contain/cover
Contain will scale the image and fit it to inside the button. Cover will cover the whole button. Or you can try background-size: 100% 100%;
.w {
background: url('https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg') no-repeat;
background-size: cover;
width: 70px;
height: 50px;
}
<button class="w drum">w</button>
You have to reload your CSS file manually, Or remove cached data.
If you are programming in PHP,
Do it like this:
<link href="style.css?<?php echo time(); ?>" rel="stylesheet">
Check the location of your image folder, if you are inserting your images(downloaded) in a separate CSS file then your image folder should be inside the CSS folder.
.w {
background-image: url('images/pic.png')
}
How do I write the right adress, the code is:
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
}
How do I put a image from my resource file? I tried background-image: url("pic1.jpg") -that's the right address- and it doesn't work.
What I do is I put the images from a slideshow in css and put a simple cod afterwards in html to display it.
You have to pass a width and a height in order to make it appear. Try it like this:
.slide1 {
background: url('http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg') no-repeat center;
width: 200px;
height: 200px;
}
Edit:
If the image is in the same directory where your css file is, simply use:
background: url('nameOftheFile.jpg') no-repeat center;
Also this thread may be interesting for you: How to go up a level in the src path of a URL in HTML?
First while I was styling the css I realized I didn't create a folder for it, so I decided to create a folder for css. Which I named screen.css but right after creating the css folder my images stopped showing. I have check the spelling and the tag but nothing seems to help. I did change link tag from screen.css to css/screen.css
Everything was working fine until I created a folder for the css so I'm guessing the problem might lay there.
An example of the html
body
{
background: url(images/wallpaper.png);
background-repeat: repeat-y;
margin: 0;
background-color: #e4c17f;
font-family: 'Nova Square',helvetica, sans-serif;
}
#banner
{
width: 900px;
background-color: #a65900;
margin: 0 auto;
height: 150px;
background: url(images/banner.jpg);
}
#footer
{
width: auto;
background-color: #a65900;
height: auto;
background: url(images/name.jpg);
}
You created the folder CSS therefore probably need to reference the images from your CSS relatively to the images folder...
A relative path is the path to a file from the current directory.
-- images
---- wallpaper.png
-- css
---- screen.css
body {
background: #e4c17f url(../images/wallpaper.png) repeat-y;
}
Try this :
The Browser will start looking for the image from the folder where you have kept your css
background: url(../images/wallpaper.png);
It worked! :D
I changed the tag to:
background: #e4c17f url(../images/wallpaper.png);
I've been trying to add an image to Wordpress template, when I add a tag it auto adds display: none; to it when it appears on the site. So I decided to add it as a css image with div.
I've added this to the CSS:
.myad a{
background-image: url(http://www.henstagweekends.co.uk/images/advert.png);
background-repeat: no-repeat;
display: block;
height: 248px;
width: 189px;
z-index: 100000;
}
I've added this to the footer.php just before the tag:
<div class="myad">
</div>
I've added a temporary bg colour to show where it is. Look at the very bottom of the page.
http://www.henstagweekends.co.uk/
Any idea what is causing this?
url('URL') refers to path where images are located. Try download the image to your folder and reference it: background-image: url('<path>/advert.png')