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.
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?
You can see the problem clearly here. What I want is for the key to be to the right of the SVG image instead of directly below it. I've tried putting an <img> tag inside the svg, outside the svg, I tried wrapping the svg in a body tag then put the key outside of the body, inside the body, nothing seems to be working here. Any of you wonderful people have any ideas?
give them both ID or class attributes and limit their widths with CSS rules, like 75% and 20%, whatever. That should already be sufficient (it was when I tried it).
<svg id="mysvg" ....... >
<img id="myimg" ....... >
#mysvg { width: 75%; }
#myimg { width: 20%; }
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.
I'm writing an external user stylesheet for an old HTML page that specifies the background colour in the body tag: <BODY BGCOLOR="#808000"> (note: I can't edit the HTML).
I've tried writing the obvious stylesheet:
body {
background-color: #ffffff !important;
}
but it has no effect: the original colour remains.
Can it be done with CSS? If so, how?
FIX:
I've checked it in my place it works
body
{
background-color: white;
}
You can also do
<body style="background-color:red"></body>
It works fine here (I tested it). Are you sure the stylesheet is being imported properly?