.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')
}
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
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");
I wanted to put an image within the header but its not showing up.
I've tried looking for spelling errors, missing ending semi colons, tried it in different browsers, and made sure the picture is in the same folder as the rest of the HTML and CSS files... Not sure what else to do. This is how I coded the header in CSS.
header { background-color: #9BC1C2;
background-image: lilyheader.jpg;
background-position: right;
background-repeat: no-repeat;
height: 150px; }
I want the header to appear on each page of the website and it should have the title on it too.
You have to put a pair of parentheses like this:
background-image: url(lilyheader.jpg);
The correct way of doing this would be
header {
background-color: #9BC1C2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
}
just as the guys above have mention make sure you specify the correct path within a strings if that doesn't work then must definitely be your permission go to your terminal and chmod 404 or 605 to file of your choice.
example:
cd public_html
chmod 404 logo.jpg
Please check your jpg path, use relative path or absolute path.
I tried everything to make background image display with my local images. I know that I have the correct image location. because if I use content:url(); it works.
Background-image also works with a url image location from the internet. But it will not render with my local image. I have tried every possible location and it will not render.
This is the path to css:
<link rel="stylesheet" href="stylesheets/myCSS.css" type="text/css" media="screen">
my images folder is in the same path as my css folder.
The following is the HTML code:
<div class="col-md-2">
<p>start here</p>
</div>
and now the CSS:enter code here
.col-md-2 .angelhack {
height: 65px;
width: 188px;
display: block;
background-image: url(myPicture.jpg) no-repeat 0px 0px;
z-index: 1;
}
.col-md-2 .angelhack:hover {
background-image: url('http://4.bp.blogspot.com/-SWLJdR2_YzE/TWB-
EvvBWpI/AAAAAAAAA6U/MVtkwJXED88/s320/donkey.png');
}
Before anyone labels this a repeat question, I have searched all the answers to this question on StackOverFlow and have followed all the suggestions and I still cannot get the picture to render. I know the picture is in the correct location because with Chrome and content:url(); the image works. Any suggestions?
Your missing your "" quotes
background-image: url(myPicture.jpg);
With
background-image: url("myPicture.jpg");
try,
background: url("myPicture.jpg");
Also,
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
I have used background instead of background-image and it's working fine. and it assumes that pic is in the same folder as your html.
.col-md-2 .angelhack {
height: 65px;
width: 188px;
display: block;
background: url("myPicture.jpg") no-repeat 0px 0px;
z-index: 1;
}
EDIT: Overlooked that the file path for the url wasn't in double quotes.
Change:
background-image: url("myPicture.jpg") no-repeat 0px 0px;
To:
background-image: url("myPicture.jpg");
background-repeat: no-repeat;
Try this and see if it works.
.col-md-2 .angelhack {
background: url("../images/bg.jpg") no-repeat;
//Set your path in the double quote's
}
Your only problem was the way you wrote the background-image
Instead of writing it like this
background-image: url('mypicture.jpg') no-repeat 50px 50px; //the size isn't good there
Do it like this
background-image: url('mypicture.jpg') no-repeat;
background-size: 50px 50px;
It will appear like this
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?