I'm kind of new in html.. what is the html and css tags for my background to look like this?
If you don't want to introduce extra elements, you can do it like this:
CSS:
body {
background-color: grey;
}
body:before,
body:after {
content: "";
background-color: blue;
height: 30%;
position: absolute;
left: 0;
width: 100%;
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
The proof is in the fiddle: http://jsfiddle.net/TSZTu/1/
This solution introduces utilizes the before and after pseudo elements of the body element to generate the blue bars. Normally they are invisible, but the content property gives them content and makes them show. They are inline by themselves, but using CSS you can position them as you like.
Update:
I used absolute in the example above, but that will cause them to scroll along with your body. Also, they will be on top of any body content. You can fix that using position: fixed together with z-index: -1 as shown here:
http://jsfiddle.net/TSZTu/2/
Alternative solition per request (although, I would pick the one above)
As Vucko mentioned, you can use a gradient as well. Now, I'm not very good at building gradients, but fortunately, there are fine gradient generators online. They will give you a big chunk of code to add support for multiple browsers, and it might look something like this:
background: #2989d8; /* Old browsers */
background: -moz-linear-gradient(top, #2989d8 0%, #2989d8 30%, #333333 30%, #333333 65%, #2989d8 65%, #2989d8 65%, #2989d8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(30%,#2989d8), color-stop(30%,#333333), color-stop(65%,#333333), color-stop(65%,#2989d8), color-stop(65%,#2989d8), color-stop(100%,#2989d8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* IE10+ */
background: linear-gradient(to bottom, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=0 ); /* IE6-9 */
Actually this is a bit of faking. As you can see, this is a gradient from blue to blue, followed by a gradient from grey to grey, followed by yet another one from blue to blue.
The effect is quite different, because the gradient fills the total area of the body. And despite the fact that one gradient starts exactly where the last one ends, you can still see a bit of a blurry line between blue and grey (in Chrome at least).
Anyway, this is the result: http://jsfiddle.net/TSZTu/3/
HTML:
<div class="blue">
</div>
<div class="grey">
</div>
<div class="blue">
</div>
CSS:
.blue{
background-color:blue;
}
.grey{
background-color:grey;
}
div.blue{
padding:40px;
}
div.grey{
padding:80px;
}
Demo:http://jsfiddle.net/8Zt7w/2/
<HTML>
<style>
Body{
Background-color:blue;
}
#grey
Margin: auto;
Background-color:grey;
Height:300px;
}
<body>
<div Id='grey'>
</div>
</body>
</HTML>
Something like this...?
Try this css work as above image using single div:
div {
height: 400px;
background: -moz-linear-gradient(top, #2853c5 0%, #2853c5 20%, #7e7e7e 20%, #7e7e7e 80%,#2853c5 80%,#2853c5 100%); /* FF3.6+ */
}
This question is ... not complete, or missing something... you need to provide more information.
On the HTML tag itself, you would use something like
<body bgcolor="#ff0000">
<body bgcolor="red">
For CSS you can use something like
<body style="background-color:#ff0000;">
<body style="background-color:red;">
Simply, i would suggest that you use google and start with some basic tutorials.. StackOverflow is not a tutorial source... Once this question is answered, we do not want the next question to be... How do i insert text... While people are here to help, you should learn a basic understanding of HTML/CSS
<html>
<head>
<title>Test</title>
<style>
.blueclass
{
background-color:Blue;
}
.grayclass
{
background-color:Gray;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr class="blueclass">
<td width="200px" height="200px">
</td>
</tr>
<tr class="grayclass">
<td height="200px">
</td>
</tr>
<tr class="blueclass">
<td height="100px">
</td>
</tr>
</table>
</body>
</html>
Related
Before any thing thanks for pay attencion to me.
I just want to make a grandient.
So in HTML i have create a div simple as that.
Code:
body {
}
.containerallbody {
width: 800px;
height: 300px;
background-color: #0076b4;
background-image: -moz-linear-gradient (top, #0076b4 0%, white 100%);
background-image: -webkit-linear-gradient (top, #0076b4 0%, white 100%);
background-image: linear-gradient (top, #0076b4 0%, white 100%); /*STANDARD*/
}
<body>
<div class="containerallbody">
</div>
</body>
I have try Safari, Chrome, Firefox and IE.
I Try also every thing that shows on w3scholls.
And i have seen a lots of videos on youtube talking about this, i dont know what to do more. I just want a simple background cover all the body with a linear grandient from blue to white.
Can anyone save me please?
You have an extra space after the linear-gradient.
body {
}
.containerallbody {
width: 800px;
height: 300px;
background-color: #0076b4;
background-image: -moz-linear-gradient(top, #0076b4 0%, white 100%);
background-image: -webkit-linear-gradient(top, #0076b4 0%, white 100%);
background-image: linear-gradient(top, #0076b4 0%, white 100%); /*STANDARD*/
}
<body>
<div class="containerallbody">
</div>
</body>
I have a png graphic that I'm using as a button and when the user hovers over the image, I would like to have a color gradient appear over just the button image. Everything I'm finding is working for background images.
My html looks like this:
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
And now I'm wondering what needs to go inside the css to accomplish the color change upon hover:
.btn:hover: {
??
}
Any suggestions would be appreciated.
You need to wrap your img with an inline or inline-block element and add a pseudo element to that wrap that only displays on hover
FIDDLE: http://jsfiddle.net/xz7xy8dg/
CSS:
.wrap {
position:relative;
display:inline-block;
}
.wrap::after {
position:absolute;
height: 100%;
width:100%;
top:0;
left:0;
background: -moz-linear-gradient(top, rgba(0,255,0,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,255,0,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#00ffffff',GradientType=0 );
display:none;
content: ' ';
}
.wrap:hover::after {
display:block;
}
HTML:
<div class="wrap">
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
</div>
This works fine for me. Still recommend not to use image as background if possible. It will slowdown the performance.
<style>
button.mylink { border-width:0px; text-align:center; width : 60px; height : 20; display: inline-block; background-image : url(imgs/trailEnd_turnRight.png); text-decoration:none }
button.mylink:hover { background-image : url(imgs/trailEnd_turnRight_hover.png) }
</style>
<button class="mylink" href="#">abc</button>
I'am wondering If It's possible to have two different colors in the background, expanding 100% with bootstrap, en each side.
Here is a screenshot of what i mean,
Red on the left side, dark on the right side, expanding 100% for bigger screens. Any easy solutions for this?
There are a couple ways to do this. The best way uses pseudo-elements. You'd apply one color to the <body>, and the second color to a created :after element.
HTML:
<body>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
body:after {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
content:"";
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/3/
This answer produces the cleanest code. Disadvantages: Limited IE8 support, no IE7 support. If you need to use those two browsers, then see the next option:
Give the <body> the same background color of one side, then instead of using :after to create a pseudo-element, we just create a real element.
HTML:
<body>
<div id="bgleft"></div>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
#bgleft {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/4/
The produces exactly the same as the first method. The advantage is higher browser compatibility, with a disadvantage of a little bit more code.
Finally, you could use a gradient attached to the body. This will give both colors on the single body element, saving extra HTML, but it'll by a nasty set of CSS to support all browsers:
body {
background: rgb(239,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1 ); /* IE6-8 */
}
http://jsfiddle.net/Q66Xn/
Disadvantages: Complex CSS which is difficult to easily edit later on.
You're issue isn't related to bootstrap specific, as Ollie stated.
Some of your options are, using a gradient, or a sliver (a 1px width/height image, which you repeat on which ever axis).
I find using a gradient generator works quite well for most of my new projects I need to startup. I've attached an example for you to try.
Example
http://jsfiddle.net/wLw4r/4/
Markup
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="color: white">Something</h2>
</div>
</div>
<div class="row ">
<div class="jumbotron">
<h2>YOLO</h2>
<div class="row">
<div class="col-md-4">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-2">Something</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left, rgb(169,3,41) 0%, rgb(143,2,34) 26%, rgb(143,2,34) 26%, rgb(0,0,0) 26%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(169,3,41)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* IE10+ */
background: linear-gradient(to right, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
You will struggle to do this using only bootstrap.
You could achieve the result you are after using linear gradients: http://codepen.io/ollieRogers/pen/snjkw this would need a fallback for browsers that do not support gradient bgs.
body{
background: #49191a; /* Old browsers */
background: -moz-linear-gradient(left, #49191a 0%, #49191a 30%, #53cbf1 30%, #53cbf1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#49191a), color-stop(30%,#49191a), color-stop(30%,#53cbf1), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* IE10+ */
background: linear-gradient(to right, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49191a', endColorstr='#53cbf1',GradientType=1 ); /* IE6-9 */
}
I have two divs with same background color. How can I set the width of background?
Expected result:
Here is HTML:
<div>
<span>100% width of background</span>
</div>
<div>
<span>75% width of background</span>
</div>
What I tried to do using CSS:
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-size: 75%;
}
jsFiddle, of course.
Is it posible to do this exept of setting width of a div?
You can use background gradients with hard stops. Here I'm using custom properties on each element to dynamically set the length value. The CSS rule uses a partial attribute selector to look for the custom property in the style attribute.
div {
background-color: #fc0;
margin: 2px;
}
div[style*="--bg-length"] {
background: linear-gradient(
to right,
#fc0 var(--bg-length), /* the end of the colored segment */
transparent var(--bg-length) /* the start of the transparent segment */
);
}
<div><span>100% width of background</span></div>
<div style="--bg-length: 300px"><span>60% width of background</span></div>
<div style="--bg-length: 85%"><span>85% width of background</span></div>
<div style="--bg-length: 70vw"><span>85% width of background</span></div>
You can't do it with a simple background-color, but you can do it with a CSS gradient.
background-color is always treated as a single plain colour for the entire element, but gradients are treated as images, and can be sized. You can also do other things with gradients, such as layering multiple gradients, which can't be done with a simple background-color.
I would use a 1px image as background something like background: url(1px.png) repeat-y; then you can set background-size:75%; as it's image now. Making life easier and less/simple code as well.
you can use gradient:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 69%, rgba(30,87,153,0) 70%, rgba(30,87,153,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(69%,rgba(30,87,153,1)), color-stop(70%,rgba(30,87,153,0)), color-stop(100%,rgba(30,87,153,0)));
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#001e5799',GradientType=1 );
CSS gradient generator
jsfiddle
You should change your CSS to :
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-image: -webkit-linear-gradient(left, #fc0, #fc0 75%, transparent 75%, transparent 100%)
}
I have a table and want a certain background to be stretched across the width of the TD, whatever the width may be.
My CSS for the relevant td is currently like this:
.tools .theader
{
margin:1px;background-color:#ffffcc;
background:url(../images/td_bg.png) no-repeat center center;
}
and the HTML goes something like this:
<table class'tools'>
<tr>
<td class='theader' colspan=2>
Background
</td>
...
Here's an image of what I get in result:
So you can see the blue bevelled background fits exactly in the center of each td. I want it to stretch to reach the edges of the td so that the whole td looks bevelled. How can this be done?
You can use css gradient instead
HTML
<table class'tools'>
<tr>
<td class='theader' colspan="2">
<span>Background</span>
</td>
</tr>
</table>
CSS
.theader > span{
color:white;
padding:6px 10px;
background: #fffcfc; /* Old browsers */
background: -moz-linear-gradient(top, #fffcfc 0%, #2989d8 12%, #2989d8 51%, #207cca 96%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffcfc), color-stop(12%,#2989d8), color-stop(51%,#2989d8), color-stop(96%,#207cca), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #fffcfc 0%,#2989d8 12%,#2989d8 51%,#207cca 96%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
DEMO
HERE is the best tool to generate CSS Gradient