I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?
And,i don't want to change the background element. I want to change the background image of the #main element in my css..
I already have a css file so will overwriting the same elements using php affect anything?
Any help will be appreciated...Thanks
Each page or post will have a different class on the body, ie.
page-id-1234
post-id-4567
You can use this to your leverage inside your CSS file:
body {
background: url('home.jpg');
}
body.page-id-1234 {
background: url('page-1234.jpg');
}
body.post-id-4567 {
background: url('page-4567.jpg');
}
You could give each div#main (I assume it's a div) another class. So
<div id="main" class="pageOneBackground">...
<div id="main" class="pageTwoBackground">...
etc...
Then remove the background-img from the div#main and apply individual background-imgs to each new class.
This won't affect the php.
You can change the background with CSS/URL of image to apply to only the background of the post, only on the background of the home/main page, or both pages. http://wordpress.org/plugins/custom-post-background/screenshots/
If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:
body {
background-repeat:none;
background-position: center top;
etc...
Then on each page just add:
<style type="text/css">
body {
background-image:url(/images/background1.png);
}
</style>
You can also see this on the source of this page.
Related
I'd like to know if I can add background colors instead of background images because they sometimes don't show :). Usually, I would just use the background-image: URL(""); like usual, but again, sometimes they wont show.
Actually, it is not bad at all to determine a background colour when working with background images.
div {
background-image: url("https://via.placeholder.com/500/green");
background-color: black;
height:500px;
width: 500px;
}
<div>123</div>
You can add both the background-color and background-image on the same element for the color to serve as an alternative
You can change background with css especially, but here some example of code, I hope it will help you.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<p>You can use custom background color also with css</p>
</body>
</html>
You can use the background-color or just background property. There are 2 ways of doing it. Either you can use use css using the <style> tag, or you can just edit the css in the html element itself if you just want to add 1 line of css. Example - <div style="background: red;"></div>.
I am trying to create PDF files from HTML. Now I want to apply a Background on my pages.
But #page {background: blue;} seems to be not supported.
I tried to add the background to the body but this causes other issues. At first, I need to specify backgrounds for first page, and another for all other pages.
Further more, the resulting Document looks like this:
This is not what I want. I need the background to cover the full page but the content should be inside the page border.
It should look something like this:
For this, I added padding to the body. But there are still problems. The background is not printed on the second page, the text is not inside the margin then breaking the page and I cannot set special background for the first page.
This is my HTML & CSS for the second result. For the first, the only difference is, that margin was added to #page instead on body.
html = """
<html>
<head>
<style>
#page {
size: A4;
margin: 0;
}
body {
background: #002244;
color: white;
padding: 2cm;
box-sizing: border-box;
}
</style>
</head>
<body>
""" + get_text() + """
</body>
</html>
"""
It is rendered and printed using pyppeteer`s page.pdf method.
How can I create a background, which covers the full page with text which is inside the page borders? And how can I set separate backgrounds for the first page?
I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like
*{ margin:0;}
why is that so ?
I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.
Linked soultion question.(Please check the comments in correct selected question)
Header not touching top of screen
My code :
<html>
<head>
<style>
* {
margin:0;
}
.new {
width:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="new">New Website</div>
</body>
</html>
Some browser have set user agent stylesheet at "body" tag
For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.
You can set
body{
margin: 0;
}
Will solve your problem.
http://jsbin.com/luqoruqewa/edit?html,output
Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:
body{
margin: 0;
}
Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.
* is the universal selector. It targets all elements. When you state:
* {margin: 0}
You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.
Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.
I am using LESS with bootstrap and trying to create a simple gradiant but if I use it on the body tag I get a broken gradiant like this image.
http://i.imgur.com/nIyOeQY.png
and if I use it with the html tag I get something like this image (it starts after the div and section tags)
http://i.imgur.com/OSe3Qt3.png
Here is the code:
.bg_gradient(#start-color: #color-grad-top, #end-color: #color-grad-bot) {
background-color:#start-color;
background: -webkit-linear-gradient(#start-color, #end-color);
background: -o-linear-gradient(#start-color, #end-color);
background: -moz-linear-gradient(#start-color, #end-color);
background: linear-gradient(#start-color, #end-color);
}
html {
height: 100%;
.bg_gradient(#color-grad-top, #color-grad-bot);
}
What am I doing wrong? Thanks for your help.
I think i might have found the solution, I added the gradient to the html tag and made the body tag's background-color rgba making it transparent. that way the gradient fills the background.
I have one page and I have applied style.css to it and in that body has given by default one background Image which will set automatically by adding css file to that page.
But in that I want all formatting same but I want to change body background image.
So what I will have to do to override the css formatting ?
In style.css I have given :
body
{
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
But I want bg.png as it's background So I have used :
<body background="images/noise-bg.png">
Is there any way ?
Something like this should work:
<body style="background-image: url(images/noise-bg.png)">
In terms of specificity, the style attribute should be more specific than styles defined in a stylesheet.
You can read more about CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/
Set the background-image property.
You can give a different id attribute to the body tag for pages in your site.
For example for the home page you can use:
<body id="home">
And for another page you can use:
<body id="other">
Obviously these id names are just examples, use the ones that make most sense for your site.
Then in the CSS you can target specific pages like:
body#home {
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
And for another page you could use:
body#other {
background: url(images/another-bg.jpg) repeat-x #e4e9ec top;
}
Hope that helps.