I started these files in a different location and under different filenames. I decided I liked what I had, so I changed the filenames to something more permanent for the project and moved them to another file folder. Since that time, my header image will not show.
All markup and css code reflects the new file names and locations and everything else in the page layout renders just like it did before. Only the header image is missing.
Does anyone see something in the code that I've overlooked?
HTML
<div id="headerbox">
<header>
<h1>Southern Draw Archery of Coweta</h1>
</header>
</div>`
CSS
#headerbox {background-image: url("images/archery.jpg");
background-position: center;
background-repeat: no-repeat;
left: 200px;
right: 200px;
top: 0px;
height: 200px;
position: absolute;}
#headerbox header {position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;}
#headerbox header h1 {margin: 0px;
color: white;
text-shadow: 2px 2px black;
position: relative;}
-------A quick edit for the comments below-------
The css and image are both in their own separate folders, while the HTML files are in the main (root) project folder. So the file structure is like so:
main project folder
/ \
css folder images folder
/ \
css file image files
I've tried moving the image source to the HTML markup and the image did show back up, but the rest of the css settings wouldn't apply to it. Before I moved everything, all the code rendered like it was supposed to, as written below.
Is your CSS file in a separate folder (i.e. not on the same level as your HTML file)?
Then {background-image: url("images/archery.jpg") should be changed to {background-image: url("../images/archery.jpg") or similar
Are you sure that
url("images/archery.jpg");
Is the correct file path to your image?
I changed the image src to something else and I saw the background.
I don't see any error on css part. First of all check your image name and extension. May be your image file is in png format. Even if the image is not showing then you might have placed your css file in separate folder. So change your css to
#headerbox {background-image: url("../images/archery.jpg");
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 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
So this is my CSS code:
#plaatje {
background-image: url('Plaatjes\slider_two_temp.jpg');
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
And it won't work at all. I placed the picture in the same map as my HTML file.
your code looks fine do a couple of things!
First check whether the id #plaatje is referenced correctly? also check for the path of css and html file
second check the path for your image the path you give in css is relative to your css file you should enter the correct path! if you're not sure about that use absolute path e.g background-image: url('http://localhost/Plaatjes/images/slider_two_temp.jpg'); but beware if you have a large application you might then need to change all the paths for live server!
the last thing you could do is to hit ctrl+f12 for inspect element there you can what actually is wrong with your code!
also check your console by hitting ctrl+f12 many times the issues is that we are not using the correct path for our files which results in File not found error
if none of above works share your html code , css code so we can have a look at it
hope that helps!!!
What you can try is you can enclose your id details in a style tag and you can make id name to any tag like paragraph tag and after that all your code will be alright.
<style>
#plaatje{
background-image: url('Plaatjes/slider_two_temp.jpg');
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<p id="plaatje"></p>
If you want to try this by
<div id="plaatje"></div>
it will also work fine for div tag
try this i think
#plaatje {
background-image:url('http://investorplace.com/wp-content/uploads/2016/02/google-amazon-goog-amzn-stock-300x200.jpg');
}
https://jsfiddle.net/karanmehta786/rd1yezc2/
I want to add a GIF image to my webpage via CSS, the size of the image should be 100px X 100px.
The file structure is as follows:
Folder:
/index.html
/car.gif
I have added the JSFiddle of the code. Can someone correct it? The GIF is not getting displayed on index.html:
Code
<html>
<head>
<style type="text/css">
#position {
background-image: url('car.gif');
width: 25px;
height: 25px;
position: absolute;
}
</style>
</head>
<body>
dd
<div id="position"></div>
ss
</body>
</html>
The image (car.gif) must reside in the same directory as the CSS if you do not specify an absolute path. For this reason, the JS fiddle is useless. Check to make sure that your files are in the places you suggested they are in.
You also might benefit from a more explicit background statement, such as:
background: url('car.gif') top left no-repeat transparent;
Moreover, if your image's native size is 100px by 100px, you will need to resize it to see it properly:
background-size: 25px 25px;
I updated the other fiddle to include a more relevant version for your question:
http://jsfiddle.net/qtxg2jz5/6/
To answer Astro's comment, I can't comment on posts because I don't have enough reputation yet.
I have tested your code in my browser by replacing an image from my desktop and Image was showing up.
Once just make a change to its width and height :
width: 25px;
height: 25px;
to
width: 100px;
height: 100px;
Also Once Check this...
Ex : If our Page Url is :
www.yoursite.com/css/index.php
make sure car.gif can be accessed if you replace index.php with car.gif,
www.yoursite.com/css/cars.gif
is accessible or not.
Thats nothing but means that that file should be in same folder..
try them and hope you will get results you need..
Make sure the file car.gif is exist at the same directory or use absolute url to the image
DEMO
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')