I have created an external stylesheet named new.css. It is linked in new.html, but the problem is, the image is not displaying. I have put all my three files new.html, new.css, and banner_bg.png in the same mobile assets folder.
I'm new in Cascading Style Sheets, so please guys help me out how to do this. Thank you.
Here's my code in JSFiddle.
You have absolute path for the image in the CSS.
Use relative path instead:
background-image: url("banner_bg.png");
Your div is absolutely positioned and has no content in it, which means its dimensions are 0x0. You will need to add some height and width (you might want to add them in %).
height: 200px;
width: 700px;
If for some reason you want to use the absolute path, you would do it like this (not recommended, as it will work for you, but nobody else):
background-image: url("file:///E:/Assignment Work/SWP/Assets/mobile assets/banner_bg.png");
You need to remove
position: absolute
and specify some height to check (as #pol suggested)
.top
{
height: 500px;
background-image:url("https://www.hello.com/img_/hello_logo_hero.png"); // Change with this your RELATIVE path
}
Please try this
.top
{
background-image:url("https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2015/04/usertesting.jpg");
width:100%;
height:500px;
display:block;
}
Related
I am trying to put a background on a div using a method that I've been always using ever since. But for some reason, it isn't working. These are the things I tried:
Checked the syntax, its correct
Checked the path or typo, although I copied the path from the security tab in the properties of the image
Putting different elements inside, even though I already have sub divs inside.
I also tried this property to other divs and the body, still nothing.
I removed the bg image property and tried bg color instead, it worked.
CSS:
#menu-container{
width: 100%;
height: 800px;
margin-top: 760px;
background-image: url("C:\Users\aaron\Desktop\MODULES\WEB301\WEB301(HTML)\media files\bg.png");
}
You cannot load an image from C:\
However if you add file:/// to your path like file:///C:/Users/.....jpg this might work in some Browsers (not all). Otherwise you will have to use relative paths. This means you reference the JPG in relevance to where the HTML or CSS file is sitting.
Read this for more details about relative pathing.
I know it's repetitious question but I have problem with my code.
I have searched stackoverflow and w3schools for a background image setting
and wrote the code that was on both sites exactly but still I have problem with the following code.
body {
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
or
body{ background-image: url("Male-Fitness-Models-BAck.jpg"); }
above are the codes I used for setting background, but neither of them work.
HTML picture
If the background image file location is correct you might need to add a height and width to the container of the background image.
body {
height: 500px;
width: 500px;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
There are a few things to investigate to ensure it always works:
1) Using the project absolute path:
ensure you have FollowSymLinks in your vhosts enabled, that way you can use / in the src to call the image.
e.g. <img src="/images/dog.png" />
2) Make sure the image exists
copy and paste the src that's displayed in the browser (inspect with firebug, or view-page source to get the link) into the url bar and see what it returns - if it's a 404 then it doesn't exist on the path you gave, if it's 403 the path might be set to really strict permissions (755 on directories and 644 for files is recommended) and you might have to tweak your vhosts file to allow people to view the content, but not access the file tree.
3) If the image does exist, there is no message (other than 200) and you're using the path correctly - then it's probably because the div is empty. A background on a div with no content will result in empty space, because the background is stretching itself over 0 pixels. Add a min-height and min-width rule to your css or use inside the div:
CSS:
div {
background: url('/images/dog.png');
min-height: 50px;
min-width: 50px;
}
HTML:
<div> </div>
4) Use a proper folder structure
by using a file tree that makes sense, it makes resources easier to manage.
Hosting every file in the DOCUMENT_ROOT is messy, I'd recommend the below structure:
|--index.html
|----images/
|----css/
|----js/
that's a basic structure, then you can add more folders based on area e.g.
|--index.html
|----[area]/
|----images/
|----css/
|----js/
body
{
background : cover;
background: url("http://quizdoo.com/wp-content/uploads/qc-images/58d2957b47354.jpg");
}
<body>
</body>
Add background size to make it visible
body
{
background: cover;
background-image: url("C:\Users\mehra\Desktop\Male-Fitness-Models-BAck.jpg");
}
If you are using a PC saved image path make sure to replace the \ with / and it will work.
example:
background-image:url("C:/Users/foldername/Desktop/images/City_Landscape_Background.jpg");
Not displaying background image in class i am trying by giving exact path of image and also by placing it's name
.sat{
height:auto;
width:auto;
background-image:url(C:\Users\MHC\Desktop\ggg.png);
}
<html>
<head>
</head>
<body>
<div class="sat"></div>
</body>
</html>
Please give some height to your div for example
.sat{
background-image:url(C:\Users\MHC\Desktop\ggg.png);
heigh:250px;
width:150px;
}
If it's an empty element, height:auto; is 0, therefore you should specify a height and a width to the element
Point:1
Why you are using local file system?
It seems you can provide just the local image name, assuming it is in the same folder.
background-image:url("ggg.png");//put image same folder of your file
If you still want to use local file system then try it:
background-image:url("file:///C:/Users/MHC/Desktop/ggg.png");
Point:2
Your 'div' still empty because background properties can not contain any height or width.
So you have to put content or you have to use height and width to
consume space.
So use:
<div class="sat">**Put any content**</div>
or
.sat {
background-image:url("ggg.png");
width: 100px; // your custom height
height: 100px; // your custom width
}
Thanks
background-image:url("C:\Users\MHC\Desktop\ggg.png");
Could you give some more info about what server are you using ?
You can ofcorse try.
body {
background: url("file:///C:/Users/MHC/Desktop/ggg.png");
}
I'm trying to display a local background-image in CSS. It's in the same folder as index.html and it's not displaying.
.image {
width:100px;
background-image: url('PIC1.jpg');
}
Any help is appreciated.
It is not appearing because you didn't give any height to the div see this http://jsfiddle.net/ce1j6k7k/2/ you can remove the height to see the difference
HTML
<div id="image"></div>
CSS
#image{
width:300px;
height:300px;
background-image:url('http://placekitten.com/300/301');
}
Resources specified in CSS are resolved relative to the path of the CSS file, not the page referencing the CSS file. PIC1.jpg must be located in the same directory/folder as the CSS file itself.
There is no way in CSS to do what you think it does - and that's a good thing, because I can't think of any possible use-case. Imagine having these pages all referencing style.css:
/index.html
/products/fish.html
/user/account/orderHistory
...if style.css referenced "foo.jpg" then foo.jpg would have to be replicated at /foo.jpg, /products/foo.jpg and /user/account/foo.jpg.
I can think of 3 possible problems.
First, the image path. for example if this is your image's real path:
D:\Projects\MyProject\Content\Images\PIC1.jpg
you should do this in your code:
background-image: url('~\Content\Images\PIC1.jpg');
Second, is that the width that you've set in the code doesn't match the image's coordinates. In that case, you can either change the code or re-size the image.
And finally, the image might not be loaded on the page and by refreshing it few times it might be shown.
Based on In MediaWiki, is there a way I can apply [[Image:<name>]] style resizing to external images?
Instead of adding an entry like this in the [[MediaWiki:Common.css]] page on the wiki
.image100px img { width: 100px; }
Would it be possible to change the css line with use of a mediawiki passed variable to set the width to an arbitrary value at runtime?
I now have 10 such lines to have a relative flexibility in external image sizing but would prefer to have something of the kind
.imagewidthpx img { width: {{{1}}}; }
I have no idea how to interact dynamically with common.css or even if this is feasible and I really need to embed external images with resizing.
Thanks
Something like this might work...
In MediaWiki:Commmon.css add:
.externalimage-holder {
position: relative;
}
.externalimage-holder img {
width: 100%;
height: auto;
}
then set up a template Template:Sized-external-image like this:
<div class="externalimage-holder" style="width:{{{1}}}">{{{2}}}</div>
and call it like this:
{{sized-external-image|250px|https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg/1024px-%D0%A2%D1%80%D0%BE%D1%97%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BC%D0%BE%D0%BD%D0%B0%D1%81%D1%82%D0%B8%D1%80.jpg}}
Unfortunately I can't test it right now as I'm having some difficulties with my local installation.