I have a file structure of:
home.html
img/bg_damask1.jpg
css/style.css
When I set my body background image I can't get it to load. I've tried:
background-image: url('../img/bg_damask1.jpg');
background-image: url('/img/bg_damask1.jpg');
background-image: url('img/bg_damask1.jpg');
But none are working. How do I get my css to reference the background image?
ETA: In browser dev tools I see that no matter what file path I put in, the browser is only referencing 'bg_damask1.jpg' without the file path. If I edit it in dev tools the image shows up using option #1. Now I'm stumped as to what's causing the breakdown.
If you try to use for this body.
Your css must be like this
body {
background-image: url(../img/bg_damsk1.jpg);
}
Also for you example is
body {
background-image: url(http://www.radioviva.fm.br/images/backgrounds/bg-squares-3d.jpg);
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
</body>
</html>
That example you must just change url path to yours.
Third option should be working, check the source code in your webbrowser and check if the image is actually found. If not try reuploading the image, renaming it or placing it in another folder.
Related
In my style file, I have a background with a url that links to my image. But the image doesn't display on screen..
So, I have my image saved in:
public/img/coding.jpeg
And my Sass file saved in:
resources/assets/sass/style.scss
I have tried this code in my Sass file:
background: url("/public/img/coding.jpeg");
But that doesn't work. Why not..
did you apply it to the body in your CSS? :)
body {
background: url("/public/img/coding.jpeg");
}
you can also just apply it directly to your body tag...
<body background="/public/img/coding.jpeg">
</body>
i have little issue with repeating background image using bootstrap framework, but i'm quite beginner. I tried many ways already and nothing works.
Can u help me with that please ? I've tried for example that :
<style>
html, body {
background: url("img/bg-pattern.png") repeat;}
</style>
Your path is probably incorrect. As far as I can see, bootstrap has a different folder structure than what your code suggests. Try this:
body {
margin: 0;
background: url("../img/bg-pattern.png") repeat;
}
I'm unable to reproduce your issue on JSFiddle. For this reason I can only presume your image path is invalid.
In specifying img/bg-pattern.png, you're pointing to the bg-pattern.png file contained within the img folder contained within the same folder as your CSS. This assumes a folder structure of:
img
myHtml.html // Where your style element is included
Make sure your "img/bg-pattern.png" is present in the same folder where your file is present
else give the absolute path of the image.
Try using FireBug, maybe you'll see that the <body> tag is much smaller ( in height ) than you think.
I've moved my background: ... from the <body> tag to the actual <div> that contains the entire content ( which grow dynamically vs the <body> ) and the background is repeatable there ...
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-image: url('a.jpg');
}
.main:hover {
background-image: url('b.jpg');
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
When I load the page, my a.jpg didnt appear at all, hence no hover effect
Is it something wrong with my code?
http://jsfiddle.net/ZH9EL/6/
Nothing is wrong with your code. The first image is being redirected to the main website so you don't have an image being loaded. You will have to host it locally. I used a different image and it works.
No there is nothing wrong with your code, it could work, but I believe it is risky to use 2 images, if 1 is not loading it will not work...
You'd like to use two images but if hover image is taking to long to load or just not loading at all it will not work very well..
You might want to try Alois Mahdal's answer: https://stackoverflow.com/a/19967062/3217130 please read their reply..
Your css should be something like:
<style>
#main {
width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
background: url('a-b.jpg') no-repeat left top;
}
#main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
</style>
This will work and will load normal and hover at the same time so you wont face problems with dns or server delay and other problems that could make pages look ugly if images are not loaded...
Please try Alois Mahdal's answer, this will work for you, if you don't understand how to create this for your images (a-b.jpg and new smaller but better code) then I would like to tell you how to do this with your images and classes and the result you need.. I create sprites with Paint .NET or I use spriteme.org to optimize CSS on running websites you can copy new css and images if you're using spriteme.org they will be created on the fly. There are lot's of ways to create or edit images...
I hope my answer was helpful to you,
Happy coding
I am currently working on a Rails App, and am able to get an image as the background of the home page. However, I placed the code in the homepage css file, but it is being applied to the application css file also. This is resulting in the image being the background for all pages in the app.
In a Rails 3.1+ app, how do I get the background image to only appear on the homepage?
I have tried to move the background image css block to a different css file, but it still applied across all pages.
Declare styles inline for the page you want, if you declare in CSS file and you link those files in several documents than obviously it will take the background image for the respective element
Suppose it is like index.html
<style>
body {
background-image: url('#');
}
</style>
Or simply declare a class and apply on that particular page
.unique { /* In Your CSS File */
background-image: url('#');
}
<body class="unique"></body>
Use a class name on the body tag for that page only. Create a corresponding CSS declaration for that class.
I'm not sure if this is the best way to do this but I solved this problem in one of my apps by making two application layouts, one for the home page (home_application.html.erb) and one for all other pages (application.html.erb). Put an id tag in your CSS file:
#home {
background: url(example.jpg);
}
Make the application.html.erb:
<!DOCTYPE html>
<html>
<head>
header
</head>
<body>
stuff
</body>
</html>
Make the home_application.html.erb:
<body id="home">
stuff
</body>
Then in your static_pages_controller (or whatever controller you use for your home page) put:
def home
render 'layouts/home_application.html.erb'
end
This will render the layout with the background image for the home page and the layout for everything else for all other pages by only changing the id of the <body> tag.
Don't know what's going on, but for some reason my background image is not showing when linked in external style sheet.
Example1: (working)
<html>
<head>
...
</head>
<body style="background: url(images/image.jpg);">
...
</body>
</html>
Example2: (non-working - external css file)
body {
background: url(images/image.jpg);
}
The image is displays when/if I use the first example, but no image is displayed when I use the second one.
Any suggestions? Thank you in advanced...
The directory your external CSS file is stored in may be different from the directory of the page you are putting the inline styles on. You may need to start your path with a slash.
url(/images/image.jpg)
or perhaps go back a directory like
url(../images/image.jpg)