So i dont have set margines on section before footer but somehow it is separated and i cant seem to find out why. Any idea? thanks!
html:
<section>
<div class="content"></div>
</section>
<footer>
<div id="footer"></div>
</footer>
and css:
.content{
background-image: linear-gradient(bottom, rgb(135,127,127) 0%, rgb(37,37,35) 69%);
background-image: -o-linear-gradient(bottom, rgb(135,127,127) 0%, rgb(37,37,35) 69%);
background-image: -moz-linear-gradient(bottom, rgb(135,127,127) 0%, rgb(37,37,35) 69%);
background-image: -webkit-linear-gradient(bottom, rgb(135,127,127) 0%, rgb(37,37,35) 69%);
background-image: -ms-linear-gradient(bottom, rgb(135,127,127) 0%, rgb(37,37,35) 69%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(135,127,127)),
color-stop(0.69, rgb(37,37,35))
);
#footer{
background:url(images/footer.png) left top no-repeat;
height:450px;
}
Try applying a CSS Reset before you do any of your styling: http://meyerweb.com/eric/tools/css/reset/
In HTML4 specs (http://www.w3.org/TR/CSS21/sample.html) there is a default stylesheet defining margins and other formatting. It can cause that the browser renders margin even though you didn't write it in your CSS.
As far as I know, there is no specs for a default stylesheet in HTML5 yet, thus the browsers use their own default stylesheets.
Therefore, it seems that the margin used by section element has some margin set by default (in the browser). The best way how to avoid this is to reset CSS.
http://html5doctor.com/html-5-reset-stylesheet/ is probably a good solution for you.
Related
I'm new to WordPress. We have bought one of the themes and I have being trying to add a gradient to our footer. The theme provides a custom CSS option, but when I add this code to custom CSS and save it I don't see any changes.
This is the code I added to my footer:
.footer {
background: #87e0fd;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZTBmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iIzNmOTNiNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTJlM2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #87e0fd 0%, #3f93b5 38%, #012e3a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(38%,#3f93b5), color-stop(100%,#012e3a));
background: -webkit-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -o-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: -ms-linear-gradient(top, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
background: linear-gradient(to bottom, #87e0fd 0%,#3f93b5 38%,#012e3a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#012e3a',GradientType=0 );
}
It's a little hard to give you an accurate answer based on such limited information, but I will try nonetheless.
Your CSS is valid. I've thrown together a quick test, and it seems to be working in both Firefox as well as Chrome. So you're good there.
The most common problems and their solutions:
Mixing up ID's and Classes: You are using the class 'footer', indicated in CSS by the dot at the beginning. Chances are the footer is using an ID, which is written with a hash. You can change the selector to #footer.
The footer is empty: If an element in HTML is empty, it causes the element to be zero pixels in height, which effectively makes it invisible. Add and adapt the following to the second line of your CSS: height: 256px;
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need a help regarding the background of the website, below are the details I want to know:
Different gradient background on left and right of the website (It should work also on all the IE Browser).
How will I do that using the HTML/CSS?
Please help. Thanks!
If you want it to work on older browsers, you could write something like this:
http://jsfiddle.net/ftcjZ/2/
This is more complicated html - it all depands on what exact browser do you need to run this on.
CSS:
.bg-left { background: url('http://cdn.imghack.se/images/3be5ae39376f069c0f49dd0cf09e74c7.png') top left no-repeat; }
.bg-right { padding: 0 118px 0 125px; background: url('http://cdn.imghack.se/images/ae53c28777043687b9a110e867798cb5.png') top right no-repeat; }
.main-content { height: 800px; background-color: white; }
HTML:
<div class="bg-left">
<div class="bg-right">
<div class="main-content">
</div>
</div>
</div>
EDIT: I updated the code changing margin for main container to padding in .bg-right as this is more reliable solution.
Generate your body background here
Create centered container div with and transparent curtain image background
Create centered website-container div in container div 100% height and set the background to the grey color
Good luck.
Clarification for Quentin's comments: use diagonal gradient:
background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(135deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
this is method by which you can make background texture through CSS
background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;
note:you can change the value of polarity and linearity and then define different background throughout the page through background-position
Also check this out.-->http://lea.verou.me/css3patterns/
Its also possible to use image as a gradient base. open this noisetexturegenerator.com and try below thing
body { background-image:url('gradient image'); background-repeat:repeat-x; }
One best idea to work in all the browsers and most of the resolutions is, using a huge image, with a separation in the middle, having a width of 2048 and make the vertical scrolling fixed.
This would work in all the browsers.
body {background: url("huge-image.png") center top no-repeat;}
To all who say bg will be big.
An image of resolution: 19488 x 3552 and the size is just 51 KB. Check it out:
(source: znate.ru)
You can use css-gradient. This should work with all browsers.
background-image: linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -o-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -moz-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -webkit-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -ms-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.16, rgb(232,232,232)),
color-stop(0.58, rgb(122,122,122)),
color-stop(0.79, rgb(115,115,115))
);
Older versions of IE don't support gradient, so you have to make second div container, which will be transparent on other browsers.
And define new css for older versions of IE, e.g.:
<!--[if lte IE 8]>
<style>
.diaggradientback
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}
.diaggradientfront
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}
</style>
<![endif]-->
I am trying to apply pure CSS3 Gradients (no images, etc.) on some text but the text remains un-changed.
My current code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text Gradients</title>
<style>
/* The gradient class */
.gradient {
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));
}
</style>
</head>
<body>
<!--The text with the gradient-->
<h1 class="gradient"> Hello World </h1>
</body>
</html>
I would recommend this site, this will work for all modern browsers
background-image: linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -o-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -moz-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -ms-linear-gradient(bottom, rgb(93,245,172) 22%, rgb(121,255,207) 61%, rgb(158,255,249) 81%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.22, rgb(93,245,172)),
color-stop(0.61, rgb(121,255,207)),
color-stop(0.81, rgb(158,255,249))
);
Also try using css3pie, it allows you to add some code that makes it work in IE browsers.
I was able to produce gradient text in Chrome using:
h1 {
font-size: 72px;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
I recommend you to use -prefix-free if you are using lots of CSS3. This allows you to skip all browser prefixes, and the library will add all necessary prefixes at run time.
Your style would look like this if you use it:
.gradient {
mask-image: gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1)));
}
That will only work for webkit users. To support all browsers you'll need at least:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
Change the color values to the values of your need.
Edit: As #Lokase said: you can also use the generator which he linked in his/her comment.
Doen anyone know how to use two colors in one table cell (td) and how to let them overflow inc each other?
For examble. For my website (www.ericversteeg.nl) i want to use in my guest book title columns light purple in the top of the cell and dark purple in the bottom.
I think i have to assign a class in the td.
But how do i make my class in CSS?
Greetings Eric
The CSS 3 drafts introduce gradient colours.
e.g.
background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);
Note that browser support is not universal.
I found this tool quite helpfull: CSS3 Gradient Generator. The code it produces isn't the most beutiful but it works!
There are a couple ways to do this. The first is to have a div on top and a div on bottom, each with the different color.
<td class="multi_purple">
<div class="top">
</div>
<div class="bottom">
</div>
</td>
and style the two divs with their respective colors.
A "better" option would be to just use a background image of the right colors. This will be cross browser supported, but doesnt do well if your table grows or shrinks in size.
The newest option would be to add a gradient. check out http://www.css3please.com to see the syntax for this.
but its something like this
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
with of course your purple shades in place.
This degrades into a solid color for browsers that dont support gradients (lookin at you ie 6/7?)
You could use a background gradient like was suggested, or using a background image that has both colors in it.
If you know that your cells are going to be say, 30px tall, make a 30px tall by 1px wide image that is split where you want it, and have both colors in it. Then using css:
td {
background-image: url(colors.png);
background-repeat: repeat-x;
}
To tile it horizontally, thus getting the effect you're after.
Is this what you're looking for?
http://jsfiddle.net/4NXRx/2/
It uses a background gradient and you don't need to call any image resources. You also don't have to worry about updating the image.
There's a back-up color for browsers that don't support gradients. It's an effect that isn't crucial to all visitors, so it's no big deal if some visitors don't see a gradient.
Note, that I have made the stops at 49%, so there is no gradual change. I don't know if that's what you want. Obviously, you'll have to choose nicer colors.
table td {
padding: 10px;
background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-gradient(
linear,
right 49%,
right 50%,
color-stop(0.08, #CEC3FA),
color-stop(0.51, #B9AAD1)
);
I am having the most difficult time getting textured background images to show up correctly in HTML5 tags. Specifically, I'm trying to add a .png texture of low-opacity watercolor daubs to a tag that already has a cross-browser gradient applied to it. I can get the gradient to show up fine, but can't get the background image to show up correctly.
I've been told that the CSS command for it is shorthanded:
background:url("filepath");
Is it a matter of the type of quotes I'm using? Does it matter if it's single / double quotes? Or no quotes at all? i'm not sure what the quotes are doing to the selector, or if it's a matter of you can't apply a background image AND a gradient? You can view the space I'm trying to modify at http://www.zeldezine.info/demo/ in the obvious footer position.
Thanks!
You can't add a background image and a gradient to the same element. As for quotes it doesn't matter whether they are single, double or none at all. Just make sure the image path is correct.
If you want both, you can do something like this:
http://jsfiddle.net/vjEh7/
CSS:
footer {
background: rgb(169,3,41);
background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
div {
width: 150px;
height: 160px;
background: url(http://www.zeldezine.info/demo/img/logo_bottom.png) no-repeat;
}
HTML:
<footer>
<div></div>
</footer>
Try this:
body
{
background-image:url('images/image.jpg');
background-repeat:repeat;
}