I have 4 5 pages on my website and all I need is a different background-image fixed for each page and responsive(Scrolling shouldn't affect the image position). I can't add the style to the body tag because it'll set the image to all pages.
What should I do?
Thank you.
EDIT:
Forgot to mention; all pages linked to one CSS file!
Use different class in body tag. based on that Class name you can set background images using CSS.
Example:
Page1:
<html>
<head></head>
<body class="page-one"> welcome to page one</body>
</html>
Page2:
<html>
<head></head>
<body class="page-two"> welcome to page two</body>
</html>
Style:
.page-one{
background-image:URL("images/bg-one.jpg");
}
.page-two{
background-image:URL("images/bg-two.jpg");
}
give each image and/or body tag its own class and link that in the css stylesheet so the edit of one doesn't affect all.
Related
I currently have this, but it is not setting the background as expected:
<body style: background-image url()>
Also I need it to be a file not a link
Looks like #Sverre beat me to the suggestion of moving your CSS style to a separate file. If you prefer to leave it directly in the tags, you will have to reformat it a bit like so:
<body style="background-image: url('https://yourdomain.com/some-image.png')">
I'd recommend doing this in your CSS file. This page goes in depth on CSS backgrounds and shows you how to style them as well.
You can do it in the body tag as follows:
body {
background-image: url("example.jpg");
}
I am excited to complete this project, i'm getting close but need help.
I want the width on the download now button equal the width of the book?
http://www.orcaaccounting.com/freeStuff.html |
Then make the image size be mobile friendly. Right now the page isn't mobile friendly.
Any other pointers are greatly appreciated.
Here is a url to my source code.
I couldn't figure out how to insert the code here.
If these are fixed images (i.e. they will not change), then all you need to do is manually set the width of the download button to be the same as the width of the book's image:
<img src="downloadnowOrange.png" style="width:182px">
Note that the above is considered bad code, but it works perfectly and since the rest of your site uses that same style, we'll leave it like that.
How did I discover the correct width for the button? If you are using Google Chrome browser, you can right-click on the book image and choose "Inspect Element". This opens Chrome's "DevTools" window and shows you the underlying HTML. If you hover over the img src, Chrome will display the image and the width/height sizes.
A few points:
You are using inline styling. This means that you have style attributes on each div/etc that style the element. For many reasons, this is not optimal. It is pretty easy to fix this. Give each DIV a unique className, and create a style tag in the document's head with the styles, like this:
Inline-styling (Bad):
<div style="width:50px;height:80px;background:red;">
<img src="healthyCooking.png" style="border:1px solid green;"/>
</div>
Using a style tag:
<head>
<style>
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
</style>
</head>
<body>
<div class="redDiv">
<img src="cookingBooking.png" class="cookImg" />
</div>
That's what people mean by inline styling. Try not to do it. Use the 2nd method, or, better yet, use an external style sheet. To turn the style tag example into an external style sheet, you just move the lines between the <style> and </style> tags - exactly as they are into an external text file (for e.g. mystyle.css), then the head becomes:
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" >
</head>
The file mystyle.css looks like this:
.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}
What would the HTML code be to set this url as my background...?
http://fin6.com/wp-content/uploads/2013/08/6c16724dd8d4aef072e62caeb164ff372.jpg
I am using Lead System Network.com' creation wizard trying to set a background as a landing page.
You could either add the background attribute to your body tag.
<body background="IMAGENAME.jpg">
Or you can add a CSS rule for the body element like
body {
background-image:url('IMAGENAME.jpg');
}
and include the CSS in the HTML header
<link rel="stylesheet" type="text/css" href="theme.css">
you can do it with css as the example of a friend or html shape but I do not recommend it because it is obsolete.
working with css, remember that all images you use for the web must be in the root folder of your project or it will not work.
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');
}
I'm talking about the <html> element itself, seems to work in most browsers, but IE7/8 doesn't want to play. The reason I'm even doing this is because my chore is to theme a RoboHelp web output which uses a million frames - I need to set the topmost frameset's background image otherwise background-positions don't line up when a nested frame invokes a vertical scrollbar.
I tried applying height:100%; on the <html> element also. Solution must work in IE6+. Javascript should be avoided.
EDIT:
Clarification: I'm applying style="background: transparent url(image.gif) left top no-repeat;" to the html element via a style block in the header (everything is dynamic, this is my only available method of accessing the html element).
Good heavens, just tested this on a basic page - fine. Replace the body tag with a frameset, like in my situation, and now the images don't show up. This looks to be IE-frameset specific, any suggestions?
Not sure I completely understand your problem. But applying height to an HTML element is a definite no-no. You can apply a background directly to the entire page using the HTML selector
html {
background-image: url("../images/background_image.png");
}
Hint: the '..' in the above example moves to the previous web directory. Be cognizant of your file structure.
I think you should be using CSS instead of HTML background image tag. Background image in HTML is now deprecated (outdated and not recommended) by the W3C.
Something like this:
<html class="imageBox">
<style type="text/css">
.imageBox {
width:300;
height:100;
background: url("/foobar.gif") #ff9900 90% 30% no-repeat fixed
}
</style>
<p>This div element has a background-image.</p>
</html>