This might not be the best title, but I am having a hard time trying to find the appropriate one. Basically, what I need is to have a two-color background image, with the breakpoint set to a specific position.
Here's what I have right now:
Which can be tested in this jsfiddle.
And this is what I am trying to achieve:
One thing though, is that the slant in this bar needs to be aligned with the logo, as shown below:
If there was no slant, this might be easier, but I have not found a way to achieve the desired behavior. What I tried doing was creating a div with a background color, and inside that div, a second one that would be placed on top containing the image.
<div class="line-container">
<div class="line">
</div>
</div>
.line-container{
width: 100%;
background-repeat: repeat-x;
background-color: #009b3a;
}
.line{
background-image: url('http://s8.postimg.org/fc0umdjut/image.png');
display: block;
width: 50m;
margin: 0 auto;
height: 10px;
}
But position and color to the sides are wrong, as shown in this jsfiddle:
Any advise?
Seems like a job for a gradient.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg, #1e5799 0%, #1e5799 48%, #2989d8 48%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Simply add this to your css class and change the colors within accordingly.
Even though the accepted answer is great, I wanted to share an alternative to using gradients.
Here's an option using the ::before pseudo-class with a CSS border trick to get the angled portion. You can adjust the "angle" by tweaking the border widths. The width property on the pseudo-element can be adjusted, as needed.
div {
background: green;
height: 10px;
position: relative;
}
div:before {
background: darkgreen;
border: solid transparent 0;
border-bottom-width: 10px;
border-right-color: green;
border-right-width: 10px;
box-sizing: border-box;
content: '';
height: 10px;
position: absolute;
width: 5em;
}
<div></div>
I would like to know if it is possible to create a background like this in CSS3.
The background should span a header div and the gradient should go from white to black independent of the screen width (always white on the left side and black on the right side).
Reason for not using the image is that it takes longer to load and that I can't get it to resize it's width when making the browser smaller than 1920px (the width of the image).
Have tried linear-gradient but I can't get it to work...
Regards,
Jens
If you also want the black bar at the top you should give dimensions to the background, stop the repeating and also position it where you want (treat it like a normal background image)
div {
background-color: black;
background-image: linear-gradient(to right, white, black);
background-repeat:no-repeat;
background-size:100% 20px; /*full width, 20px height*/
background-position:0 100%; /*gradient at bottom*/
/*just to give size to demo*/
min-height:50px;
}
<div></div>
Here's some CSS for you:
#grad {
background: gray; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white , black); /* Standard syntax */
}
Source: http://www.w3schools.com/css/css3_gradients.asp
I know the OP's question was answered. But I'll comment here anyway to deliver some more information to create a really more "complex" background.
First is you really can create multiple backgrounds stack on each other:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
Second is you can determine position, size, etc,... of a background-image. And here the concise syntax for it: https://www.w3schools.com/cssref/css3_pr_background.asp.
Why background-image? A basic (and important) theory of background in CSS is: A background of an element can have only 1 background-color, and multiple background-images sit on top of it (even if the background-color is declared after background-image, background-color will be still placed below the background-images), and you can resize, reposition those background-images. And an important thing is linear-gradient is count as a background-image, not background-color. The 2 links above do give all detailed information about it.
Here is a quick demo on a "more complex" background from the OP question using only 1 div HTML:
div {
background:
linear-gradient(to right, white, black) 0 100%/100% 20px no-repeat,
linear-gradient(to left, white, black) 0 0/100% 20px no-repeat,
black;
height: 100px;
}
<div></div>
I'm inspired writing this long comment because from a tutorial
https://levelup.gitconnected.com/how-to-implement-netflix-slider-with-react-and-hooks-bdb9b99d1ce4, there's a section from it there're verbose hacks in HTML and CSS to achieve what I'm able to do within just a single line of CSS background, and I think it's cool to share, isn't it?
/* simpler */
.box {
width: 100%;
height: 100px;
background: linear-gradient(to right,black 0%,black 30%,transparent 75%,transparent 100%), green;
}
/* more complex */
.content {
height: 100px;
position: relative;
}
.background {
display: flex;
height: 100%;
}
.left {
background: black;
width: 30%;
position: relative;
}
.left:before {
content: '';
position: absolute;
background-image: linear-gradient(to right,#000,transparent);
top: 0;
bottom: 0;
left: 100%;
width: 275px;
}
.right {
background: green;
width: 70%;
}
.content-container {
color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px
}
<!-- simpler -->
<div class="box">
<div class="content-container">content here...</div>
</div>
<hr>
<!-- more complex -->
<div class="content">
<div class="background">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="content-container">content here...</div>
</div>
I have a page on my site that has a gray background color that I am trying to add gradient to it in a different way than just a left to right. My page has an outer div that takes up 100% of the page's width. I then have an inner div that takes up 80% of the page's with, but auto aligned. I was wondering how, if I can, do a full cycle of my gradient within each side (left & right) of the outer div, the 10% part that shows before the inner div starts.
So say an A equals 10%, and everytime I put two colors together, that is the gradient taking place within that 10%. I want to do this...
#181818, #282828 AAAAAAAA #282828, #181818
How can I do this?
HTML
<div class="graypage">
<div class="homeimg">
gfdsgsg
</div>
</div>
CSS
.graypage, .whitepage { margin: 0 auto; }
/*------Page Wraps--------*/
.graypage {
width: 100%;
left: 0;
right: 0;
min-height: 100%;
background: -webkit-linear-gradient(left, #282828, #181818); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #282828, #181818); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #282828, #181818); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #282828, #181818); /* Standard syntax */
}
.homeimg {
background-image: url("/images/bright_lights_small.jpg");
width: 80%;
background-size: cover;
background-position: center;
height: 100%;
position: absolute;
margin-right: 10%;
margin-left: 10%;
}
As I understand it, you'd like two bars - one on the left of the outerDiv and the other on the right. Each of these bars you'd like to be 10% of the page width. You'd also like each bar to cycle through the colours #181818, #282828, #aaaaaa, #282828, #181818.
I'd just use a linear-gradient with 12 colour-stops. Something like this:
#outerDiv
{
background: linear-gradient(to right,
#181818 0%,#282828 2%,#aaaaaa 4%,#aaaaaa 6%,#282828 8%,#181818 10%,
#181818 90%,#282828 92%,#aaaaaa 94%,#aaaaaa 96%,#282828 98%,#181818 100%); /* W3C */
width: 100%;
}
Credit: http://www.colorzilla.com/gradient-editor/
Here it's applied to the outer div and a solid colour is applied to the (80% as wide) inner div.
EDIT: Here's the (now updated) html and css used.
<style>
body
{
margin: 0;
padding: 0;
}
#outerDiv
{
background: linear-gradient(to right,
#181818 0%,#282828 10%,
#282828 90%,#181818 100%); /* W3C */
width: 100%;
}
#innerDiv
{
width: 80%;
margin: auto;
background-color: #dddddd;
}
</style>
</head>
<body>
<div id='outerDiv'>
<div id='innerDiv'>
<button id='goBtn'>Change the text</button>
<div class="menu-wrapper">
<ul>
<li>WORD1</li>
<li>WORD2</li>
<li>WORD3</li>
<li>WORD4</li>
</ul>
</div>
</div>
</div>
</body>
This code produces the following result:
Bacically, you have 2 posibilities here. You can set a repeating gradient
div {
width: 500px;
height: 100px;
background: repeating-linear-gradient(to right, yellow 0%, green 10%);
}
<div></div>
And you can play with the background-size
div {
width: 500px;
height: 100px;
background: linear-gradient(to right, yellow, green);
background-size: 10% 100%;
}
<div></div>
So I'm in the process of making a drag and drop browser 'dress up' type game. However, for some reason, I can't seem to position my images - either the draggable image or the doll base. I am able to drag and drop the draggable image, but I can't change their initial positions.
I've changed their position types, tried using top/bottom/left/right, margin, and even padding to move the images to where I want them, but they absolutely will not move!
Here's the HTML/CSS I'm using:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
<!--Page Styling-->
html, body{
background-color:#5C5C5C;
height: 100%;
width: 100%;
overflow: hidden;
}
#banner{
background: rgb(143,250,138); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,250,138,1) 0%, rgba(127,239,127,1) 10%, rgba(109,223,115,1) 25%, rgba(107,229,115,1) 37%, rgba(106,236,114,1) 50%, rgba(74,226,82,1) 51%, rgba(136,242,122,1) 83%, rgba(175,252,142,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,250,138,1)), color-stop(10%,rgba(127,239,127,1)), color-stop(25%,rgba(109,223,115,1)), color-stop(37%,rgba(107,229,115,1)), color-stop(50%,rgba(106,236,114,1)), color-stop(51%,rgba(74,226,82,1)), color-stop(83%,rgba(136,242,122,1)), color-stop(100%,rgba(175,252,142,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,250,138,1) 0%,rgba(127,239,127,1) 10%,rgba(109,223,115,1) 25%,rgba(107,229,115,1) 37%,rgba(106,236,114,1) 50%,rgba(74,226,82,1) 51%,rgba(136,242,122,1) 83%,rgba(175,252,142,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ffa8a', endColorstr='#affc8e',GradientType=0 ); /* IE6-9 */
font-size: 20px;
font-family: 'Arial Black', sans-serif;
width: 100%;
margin-left: -10px;
text-align: center;
z-index: 99999;
position: fixed;
}
#holder{
position: absolute;
height: 800px;
width: 900px;
background-color: #838B8B;
margin-left: -10px;
margin-top: -300px;
z-index: -1;
}
<!--Bodies-->
#body1 {
position: absolute;
right: 0;
height: auto;
width: 200px;
z-index: 1;
}
<!--Parts-->
#breath{
position: relative;
left: 10px;
}
</style>
<!--Draggable Scripts-->
<script>
$(function() {
$( "#breath" ).draggable();
});
</script>
<!--End Draggable Scripts-->
</head>
<body>
<div id="banner">Homestuck Character Editor</div>
<div id="body1"><img src="http://i.imgur.com/aO3GWBO.png"draggable="false"/></div>
<div id="holder"></div>
<div id="breath">
<img src="http://i.imgur.com/iAmOFlH.png"/>
</div>
</body>
</html>
You positioned the div on the right, but the image is still on the left. Since div elements are blocks, they fill 100% of their parent. In this case, the parent is 100%. You can get the image on the right side of the screen by selecting it, and shifting the image itself. I used the following:
#body1 img {
position:absolute;
right:0;
}
The fiddle.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
christianselig.com/contact
For some reason the footer only sticks half way up the page on this one page, but all the others are seemingly okay. I've looked for ages and can't peg the reason.
I've put the relevant HTML and CSS below, and anything more is obviously available.
HTML:
<div class="alt-contact">
<p>Prefer manual contacting? Email me.</p>
</div>
</div> <!-- This div corresponds to the content wrapper div above -->
<div class="footer-wrapper">
<div class="footer">
<p class="copyright">Copyright © 2012 Christian Selig</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS:
.footer-wrapper {
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #f7f7f7 0%,#d6d6d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
border-top: 1px solid #ccc;
bottom: 0;
height: 16px;
overflow: hidden;
padding: 8px 0 5px 0;
position: absolute;
width: 100%;
}
.footer {
color: #808080;
clear: both;
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 0.7em;
margin: auto;
width: 900px;
}
You should have:
html,
body {
height: 100%;
}
Your html has no height given to it, so it's only as tall as the body pushes it. Note, in IE8 and less you have to use "tricker" solutions like Ryan Fait's Sticky Footer:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
/* the bottom margin is the negative value of the footer's height */
margin: 0 auto -142px;
}
.footer, .push {
/* .push must be the same height as .footer */
height: 142px;
}
/* Sticky Footer by Ryan Fait
http://ryanfait.com/ */
I've used it; it works. It gives you headaches, though, because it essentially takes margin and padding flexibility away from you. Which can be a pain.
Yes, it's because position: absolute; doesn't make sticky footers. If you want a sticky footer, you need to use position: fixed;. this will make the footer stay in the same spot relative to the browser window, as opposed to the next relevant parent object.
Good Luck,
-Brian