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.
Related
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;
}
Is it possible to add a line to my CSS like this:
.custom_bg {
background-image:url(http://domain.tld/img.ext);
background-repeat:no-repeat;
background-color:#000;
}
And then on that certain page, call this some how so that the page 'knows' to listen to this line... is that possible?
Any help is appreciated. I'm fairly new to CSS.
Thanks
What you can do is make a class with a background-image(I guess you are already having that), and than use that class on the body element of that page, so for example
.custom_bg {
background: url('URL_HERE');
}
And say you want to change the background of the contact page, you can make your HTML like this
<body class="custom_bg">
Note: Call this class on the element you want to over ride the
background image, here I am assuming that you want to over ride the
background image for the body tag.
This will over ride the default styling, I guess you must be using a general element selector in your stylesheet like
body {
background: url('URL_HERE');
}
So when you define the class, CSS will pick the image from the class thus by over riding the default background image
You could add a class to the body of that single page: <body class="custom_bg">. The rest of the pages will be unaffected by that style.
as well as I understand all you should do is add this class to the tag or any other container like this:
<body class="custom_bg">
...
</body>
Hi If you want to specify background for a particular page only in your application then do
<body class="custom_bg">
...
</body>
while the css will be
.custom_bg
{
background: url('URL_HERE');
}
and if you want the background for all pages then try the following CSS
body {
background: url('URL_HERE');
}
Let's say I have 5 webpages and on each webpage I want the background color to be different. I am using only 1 css file. Each webpage will be accessed like this: domain.com/page1
Do I simply using 5 different CSS files and just change the background-color in the body or is there a more simpler way to achieve this?
Add different class to your <body> on each site, and then use that class to get proper background color.
Of course, you don't have to multiply code, that is common to all sites.
For example:
On "page1":
<body id="page1">
On "page2":
<body id="page2">
Your CSS:
body#page1 {
background: red;
}
body#page2 {
background: blue;
}
well if all pages use the same css file the same background will be used to all...
one easy way to do it is to overrule existing background-color in body. so if you have like a css file containing:
body
{
background-color: aqua;
}
then below that (after the css file is implemented) and on the page you need to have a new color you can just overrule it with following:
<style type="test/css">
body
{
background-color: blue;
}
</style>
How about adding a simple inline style to the body tag of each page such as this?
Page 01
<body style="background-color:#111;">
Page 02
<body style="background-color:#222;">
Page 03
<body style="background-color:#333;">
Bare in mind that in regards to design, such proposed variation in colour scheme is often a bad idea. There might be some function behind your idea which would make sense but otherwise I would recommend minimalism coupled with consistency throughout the design process.
I need to apply different background images to the home page < html > tag and the inside pages of a site. In order to do this the references need to be unique.
Without using class or id, how do I differentiate between the tags?
I tried this, but it doesn't validate:
<html class="inside"...
Thanks!
Add the class to your body element, where it is valid.
Then do
body.inside {
background-image: url(/path/to/it.png) repeat;
}
Inline stylesheet for each different page:
<style> html { background-image: url(someimage.png); } </style>
If you're talking about different background images for different pages, I guess you'll need to create a different stylesheet for each different background you want, and just make sure to include the appropriate stylesheet from each page.
You want this:
CSS:
#home { background: ... ; }
body { background: ... ; }
HTML:
<body id="home">
</body>
Other pages:
<body>
</body>
You should consider using IDs. That way you can keep all the references to your background images in your CSS file. E.g.
#background-main { background-image:url(background-main.jpg) }
#background-page1 { background-image:url(background-page1.jpg) }
#background-page2 { background-image:url(background-page2.jpg) }
You would then just have to reference the ID of the background image you want to have displayed. E.g.
<body id="background-main">
Alternatively, you could use classes.
This approach will make it easier for you to maintain your site.
I have a problem with my site.I cant make the table appears on the img. It appears down of the image or up of the image. I need some help with the codes. Actually i dont want the img to reapet and to fit in users window everytime. The code to insert the img is this
<body oncontextmenu="return false;" background="bg_body.jpg">
And the code that a actually helped me but didnt solved the problem 100% because table didnt appears with img is this
<style> <!-- body { margin: 0px; } --> </style>
<img src='whatever' style='width: 100%; height: 100%;' />
if you want a background image to fit the size of the browser (which i'm guessing at, but if you have a 100% height and width on your image, that seems what you're after), you could do something like this:
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;}
.backgroundlayer { position:absolute;top:0;left:0;z-index:1; }
.toplayer { position:absolute;top:0;left:0;z-index:2; }
</style>
and then in the body of your code...
<body>
<img src="someimage.png" style="height:100%;width:100%;" class="backgroundlayer" />
<div class="toplayer">
my content above the image...it doesn't have to be a div...use a table if you want
</div>
</body>
Consider using CSS background properties.
HTML (something like this, un-tested):
<body ... style="background-image:url('bg_body.jpg'); background-repeat: no-repeat;">
If you want your background image to "resize" to the browser, you will have to hack it to work. One common way is probably to use two div tags; the first one will contain the image at 100% size, with absolute positioning. The second one contains your actual body content, with a higher z-value. It is a lot more work than you might think.
For detailed discussion on this, see this thread: http://www.htmlcodetutorial.com/help/ftopic4503.html
There is a couple things here that don't make too much sense:
"oncontextmenu="return false;" are you trying to run some sort of javascript? If so, you need to call a function before the "return false", like so:
<body onload="someFunction() return false;">
Also, I don't think you can set a background for an element the way you did it, it would be more like this:
<table style="background:path/to/my/image/...">
I'd love to help some more, but please explain yourself a little better.
ok, I'd suggest you do something like this:
Whether it is on an external style sheet, or embedded inside the head tags, you can set the image size with some simple CSS, like so:
<style type="text/css">
body{
background-image:url(../path/to/image);
background-repeat:no-repeat;
height:100%;
width:100%;
}
</style>
Try this to see if it works, I'll help you more if it doesn't.