I have tried looking up several ways to make my specific image the background of a webpage, but it hasn't worked.
I tried
<style>
body {
background-image: url("ice_dna.jpg");
background-repeat: no-repeat;
}
</style>
to no avail. I even tried
<body background="File:Ice-Binding-DNA--.jpeg">
<p><a href="http://*LINK*"</a></p>
</body>
But this just made the background into a link to the image... I tried making the background just the link, but that didn't work either. The only way I can display the image is as img src="...". Is there a way to make that image source into the background?
If you can display the image using <img src="...">, then there shouldn't be anything wrong with the image itself. Your CSS also looks good to me. Indeed, it works just fine in a snippet like this:
body {
background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png");
background-repeat: no-repeat;
}
Since you say that you're using an inline <style> element for your CSS, the problem can't even be caused by relative URLs (which, in an external style sheet, would get resolved relative to the location of the style sheet rather than the location of the HTML page).
Thus, I'm forced to conclude that your problem cannot be reproduced as described, and must be caused by something that you have not described in your question. I have therefore voted to close your question, as any answers to it at this point would have to be pure guesswork.
Ps. This really should have been a comment, but one can't include snippets in a comment. I've instead marked this answer as Community Wiki, so that I won't get any rep from up/down votes to it.
You would need to make the page itself "full height". By default, it has no height. And then you should be able to apply your background:
body, html {
height: 100%;
}
body {
background-image: url("img_girl.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Related
I need to create a small website that can be opened and functional in a single file. I can't quite figure out how to get an image background to show up. I have my image in Desktop/assignment/Website-Background.jpg. I have tried a bunch of different ways to get it to work, but it just wont. My current code is:
body{
height: 100%;
}
.bg {
background-image: url("Website-Background.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
And I have tried also tried
body {
background-image: url("Website-Background.jpg");
}
Can somebody point out what I'm doing wrong?
First in your browser press F12 and youll see if the image is being called or not in the console window, Then if it is being called and there is no error then maybe set a height of 200px and see if the image shows up.
I do not believe you are indicating the location of the image properly. Remember for CSS, you have to back out of folders and go into others to find the file. Where is your HTML file? You may have to back out of its location and into your assignment folder.
If you are backing out:
body {
background:url("../assignment/Website-background.jpg");
background-size:cover;
}
If you simply have to go deeper into your folder:
body {
background:url("assignment/Website-background.jpg");
background-size:cover;
}
Just a side note that if you "really" want to have your website as a single file (meaning that background image is another file), you can encode your image into base64 via some tool (like) and then have it in your file.
Just put the image and your html document in the same folder and your code will work like a charm...You will have to change nothing in code to make it work..
I got issue with background image on my webpage (won't show). I tried to place it in different <div>s but I cannot find solution, how to solve it. Also I tried to find solution here, but nothing worked for me. I don't have written long path to image, because all is in one folder. Also I know, I have it little chaotic.
I don't want to repair my wrongs, but just want to know how I can solve it and why it not work.
Here is my HTML source
And here is my CSS source
Place the URL within quotes, within the CSS file in the background property of the CSS file. url(limo.jpg) should instead be url("limo.jpg")
Depends what browser you're on. Try putting limo.jpg in quotation marks and adjusting to background-image:
body {
margin:0;
padding:0;
line-height: 1.5em;
background-image: url("limo.jpg") no-repeat center fixed;
background-size: cover;
}
I am trying to learn css. I have been following lots of tutorials and are now in the section where I learn about the values of background-size.
I have been making fiddles trying every value but I cannot seem to make it work with contain or with porcentages
Here is my fiddle with the value content: http://jsfiddle.net/r3h2p46r/
I have used the same code I have used for every other value:
body {
background-image: url("http://bit.ly/1Rq1kp3");
background-repeat: no-repeat;
background-size: contain;
}
I cannot make it work with percentages either: http://jsfiddle.net/p3btc7oc/
Any ideas why is this happening?
They seem to all work here: http://bit.ly/1Q6z643
But now when I try by myself
Thanks!
background-size: contain;
It is not visible here because contain take the size of body and here your body tag is empty...
For more information...JUST CHECK IT--------->
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
I have this site :
http://reliance.dg-site.com/es/ ---SPANISH LANGUAGE
I have this site:
http://reliance.dg-site.com/--- ENGLISH LANGUAGE
I want the picture on the front page (website in Spanish) to be the first page of the site English.
I do not understand why not look good in Spanish website ... I want to resize my image
This is code css:
.page-id-553 #content
{
background:url("/wp-content/themes/reliance/images/ccc.jpg")
}
Image size is too large? I tried to do less but unfortunately it still does not look too good
Can you help me to solve this problem?
Thanks in advance!
I have checked your site and found a change in the css.
In http://reliance.dg-site.com/, you have used
background-image: url(http://reliance.dg-site.com/wp-content/uploads/2014/05/shutterstock_132802436-13.jpg);
for your body tag.
But in http://reliance.dg-site.com/es/
.page-id-553 #content
{
background:url("/wp-content/themes/reliance/images/ccc.jpg")
}
So, Remove the code inside .page-id-553 #content{ } and add
body {
background-image: url("/wp-content/themes/reliance/images/ccc.jpg");
}
If you want to use a background for this page then try
body.page-id-553 {
background-image: url("/wp-content/themes/reliance/images/ccc.jpg");
}
Welcome to SO, if you could be a little more specific with what you need in future that would be a massive help. Also if you show methods you have attempted also that would help narrow down the issue.
For now, based on what you said, I believe this would achieve what you are after. I simply applied these to the .page-id-553 #content class/id within the console.
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
I want to use multiple images as backgrounds.
For example: index page - car image, about me page - notepad image
I tried to add this code:
body {
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg);
background-repeat:no-repeat;
background-size:cover;
}
But I don't know how to switch them. How can I choose which image to use as the background?
Hi you can use a technique call "CSS Sprites". In short, you combine all of your images to one big image by using a sprite generator tool at http://spritepad.wearekiss.com/. Next, you change the background positions within the big image to get the background image for the element.
You can learn more from here
You can add a special class to your body element for each page and specify a different background-image for each case.
HTML:
<body class="home">
...
</body>
<body class="about">
...
</body>
CSS:
body.home{
background: url(car.jpg);
}
body.about{
background: url(notepad.jpg);
}
You can accomplish this by setting each <body> tag with a specific ID and then style those ID's separately in the CSS:
<body id="home"> </body>
CSS
#home{
background-color: red;
//or image, whatever properties you want
}
http://jsfiddle.net/
As far as I know, you have three options:
1) Code it into the HTML. To do this, change <body> in your page to
<;body style="background-image: url(<url of image>); background-repeat: no-repeat; background-size: cover;">.
I see this as sub-optimal because it means a lot of typing in different places, potentially causing inconsistencies if you want to change, say, background-repeat to repeat-y and forget to change one or more of your pages.
2) Use a "mini-stylesheet" consisting of just one rule specifying the background on each page. I don't think that this is a very good solution, because along with the problems raised by 1), you also have to deal with another HTTP request, which slows down the page load.
3) Use different ids on each body element (so your <body> would become <body id="home">, <body id="about">, or anything else. I think that this is the best solution because it lets you collect all the code in one place:
body {
background-repeat: no-repeat;
background-size: cover;
}
body#home {
background-image: url(<home image url);
}
body#about {
background-image: url(<about image url);
}
This code can be stuck in the stylesheet that you link to in all your pages, so you don't end up with any extra HTTP requests. If you want to change one of the property/value pairs for body, you don't have to go through lots of files changing every one, you only have to change one.
If you use static Html u can give class to your body element or outer wrapper. Example :
Homepage
<body class="homepage">
</body>
About Us Page
<body class="about_us">
</body>
and set css
.homepage {
background-image : url('../path/to/image.jpg');
}
.about_us {
background-image : url('../path/to/image.jpg');
}
and so on for each page.
Your current css selection working for global body,
body {
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This type of css working if u want use multiple BG image on page, not made different BG for each page.