How can I add a repeated css background with an padding/space on top.
Here is my HTML Structure.
<div class="flare">
<div class="clouds">
<div class="clouds_bottom">
<div class="header">
contents
</div>
<div class="content_body_wrapper">
contents
</div>
<div class="footer">
contents
</div>
</div>
</div>
</div>
and my css code that is not working.
.clouds_bottom {
background: url('../img/clouds_bottom_bg.png') repeat left 250px;
}
Cheating is allowed with CSS. Instead of placing you background 100% away from top cover it with another div with original background [color].
html:
<html>
<body>
<div id="cheated_background">
</div>
<div id="body">
content
</div>
</body>
<html>
css:
body {
background: lightblue; /* your clouds :) */
}
#cheated_background {
position: absolute;
top: 0px;
background: white;
width: 100%;
height: 100px;
}
#body {
position: relative;
}
Check out live example.
Try using repeat-x instead of repeat? If it is repeated vertically, you will not be able to see the margin created by the background-position.
Edit to comment: If you need the repeat in both directions, what I could think of is a three-layer structure. You would need a container div with position:relative into which you could put three divs having position:absolute. The bottom one would have the repeated background picture, the middle one would be white and cover the top portion of the bottom one only, the top one would contain your actual content.
Related
How to create a layout that allows having a logo image(yellow) that spans 3 vertical div elements and does not change its location(center) when the page gets minimized. I'm using Bootstrap 4. Initially, I have found 2 solutions but they do not work when the page is resized by minimizing its size.
Using CSS style position: absolute and topY/offset - does not work because logo image(yellow) change its position..gray div goes under the pink div as a result the logo image overlaps the gray's div text content
Splitting the logo image horizontally into 3 images, the problem is that between the second(middle) image and the bottom image appears a lot of space when minimizing the page
NOTE: when the page gets minimized, the gray div goes under the pink div, and the green div goes under the gray div, as a result, the second row becomes twice taller. No problem that it is twice taller, but I want that the logo(yellow) to stay vertically centered in its original pink div
Place the 3 divs inside a wrapper
<style>
.wrapper{
background-image:url("image.jpg");
background-size:cover;
}
</style>
<div class="wrapper">
// three divs go here
</div>
This is possible through margin: negativevalue 0 -- but without actual code I can't give exact values. If standard Bootstrap 4, adding the class my-n5 (taking advantage of Bootstrap 4's spacing utility) to the logo element will make its box-model overlap others.
You need to use position: absolute, top: 50% and transform: translateY(-50%) to the logo to make it work
First, the position: absolute and top: 50% will make the logo position fixed in it's relative parent and make the top of the logo itself positioned in the center it's parent
Then the transform: translateY(-50%) will move the logo from the current position negatively for half of the logo height
Here's the working example
.c1 {
background: pink;
overflow: visible;
}
.c2 {
background: gray;
}
.c3 {
background: lightblue;
}
.logo {
width: 48px;
height: 48px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
1 DIV
</div>
</div>
<div class='row'>
<div class='col-md-4 c1'>
Left Content Logo
<img class='logo' src='https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png' />
</div>
<div class='col-md-3 c2'>
Mid Content
</div>
<div class='col-md-5 c3'>
Right Content
</div>
</div>
<div class='row'>
<div class='col-md-3' style='background: blue;'>
LEFT
</div>
<div class='col-md-6'>
MID
</div>
<div class='col-md-3'>
RIGHT
</div>
</div>
</div>
Note: You can try to resize either the div or the logo to see that it will still centered in it's relative parent container
I have an image as my header and footer and it does not reach the edges on my webpage. If my browser is full screen, it looks good. But if I shrink down the webpage, then it ends up cutting off on the right side before it reaches the edges.
How can I fix this so that no matter the size of my browser, the header and footer reach from side to side 100% of the way?
I have my HTML in a container so that it doesn't change position when I resize the browser. This is the gist of how my CSS and HTML are set up...
Here is a JSFiddle that shows my problem. If you extend the window, you can see that the header/footer takes up every inch that it should. However, if not, you can see the blank space to the right:
https://jsfiddle.net/t5gb4as7/
CSS:
.container {
margin: 0 auto;
width: 1060px;
}
/* header */
h2 {
color: transparent;
background-image: url('header-footer.png');
width: 100%;
height: 102px;
margin-bottom: 20px;
}
/* footer */
h3 {
color: transparent;
background-image: url('header-footer-turn.png');
width: 100%;
height: 102px;
}
HTML:
<body>
<div class="wrapper">
<header>
<h2>test</h2>
</header>
<div class="container">
//more
//html code
//here
</div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<h3>test</h3>
</footer>
</div>
you can use percentage as width to make it responsive like this
width : 100% ;
I would set the background image on a div, instead of the h2 or h3 tags as you are at the moment. The div width should be 100% and then it will cope with desktop and mobile.
You can use CSS media queries to load in a different background image for different screen sizes if you want to.
#header {
width: 100%;
background-image: url('images/name-of-background-image.jpg');
}
<div id="header">
<h1>Your header info here.</h1>
</div>
I am having some issue trying to implement sticky footer, that is to make the footer stay at the most bottom of the page, I think this problem is due to the fact that I use 2 divs to render rounded corners for my page, I have searched for all possible solution and tried them, nothing works.
So basically, this is my design:
<div class="global">
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div></div>
</div>
</div>
This is my CSS:
body {
font-family: Verdana, Geneva, sans-serif;
}
#global {
margin: 0 auto;
width: 85%;
min-width: 1020px;
}
.wrapper {
background: #FFFFFF;
}
.footer {
background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right;
}
.footer div {
height: 40px;
background: url('../Images/roundedcornerLEFT.gif') no-repeat bottom left;
}
.footercontent {
text-align: center;
font-size: small;
}
No matter what solution I try posted by other people on Stackoverflow, nothing works, it will either not move the footer down to the bottom of the page, or it just messes up with the footer's layout of the rounded corners.
Try this:
.footer {
background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right;
position: absolute;
bottom: 0;
}
If you want footer at the bottom give a minimum height to your content.
min-height: 800px;
Change your markup to this:
<body>
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
</div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div></div>
</div>
</body>
And then add these styles:
.footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
}
Okay, so assuming you want to keep everything you are currently doing.. I have a quick fix for you. Now, a few things to note.. I did add in a height variable to your 'wrapper' class because I needed to gauge it as if there were space inside of the wrapper itself. I also went ahead and put in a few colors to let me know exactly where I am. Either way, the simplest fix is to take your footer div and put it outside of the wrapper. The way this all works is, the footer is showing up inside of the wrapper class, the only problem is that nothing else is showing up in that class, which causes the footer to be the only thing.. creating the problem of having this footer at the top. However, if you would like to stay current with every page, moving the footer down to the bottom of the global div should be your fix, the code below:
<div class="global">
<div class="wrapper">
<div class="banner"></div>
<div class="content"></div>
</div>
<div class='footer'>
<div class='footercontent'>COPYRIGHT INFO</div>
</div>
</div>
So the problem really was in the HTML, not the CSS. You can keep your CSS or play with it as you please but to better describe what I am saying, I have been fiddling (haha) with a JsFiddle for you :) Comment below if I need to make more sense of what I am saying!
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
Lets say I have a 980px centered content area but there's a background element that expands all the way from the left of the screen to 80% of the content area. How do you accomplish this without JavaScript intervention or using a background image on the body?
EDIT:
Here's a visual concept for guidance: http://i.imgur.com/36tCm.jpg. The yellow header expands to the left of the window, outside of the content box area.
You can get the overhang effect with a div element before the 980px container and give positioning to match where the header element is
jsfiddle example or fullscreen example
in the screenshot you've got an orange overhang on the left and black on the right so here's the HTML structure (alternatively you could do the overhang with a single div and css gradients to create an orange color up to 50% then black the other 50%)
<div class="container-outer">
<div class="header-overhang header-left"></div>
<div class="header-overhang header-right"></div>
<div class="container">
<div class="sidebar">
sidebar area
</div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
content text
</div>
</div>
</div>
CSS:
.container-outer {background-color:#BDC7D2;border-top:60px solid #050912;}
.header-overhang {height:72px;width:50%;position:absolute;top:60px;}
.header-left {left:0;background-color:#FDC103;}
.header-right {right:0;background-color:#050912;}
.container {width:980px;margin:0 auto;position:relative;}
.sidebar {float:right;width:20%;height:220px;line-height:220px;text-align:center;border-top:5px solid #d7e0e9;border-bottom:3px solid #d7e0e9;background-color:#fff;}
.header {height:72px;line-height:72px;padding-left:40px;width:80%;background-color:#FDC103;}
.content {padding:50px 40px 120px 120px;background:#050912;color:#fff;}
You Handle this issue by css
#inner{
background:#fff;
width:80%;
position:absolute;
left:0;
top:0;
}
And you should set for its parents this style
#parent{
position:relative;
}
For example :
<div id="parent">
<div id="inner"></div>
</div>
You could accomplish this with a bit of visual trickery--namely, by using two yellow divs to create the visual effect of the #pageheader element.
Here's a JSFiddle illustrating the effect.
Here's some sample HTML:
<body>
<div id="yellowBar">
<div id="content">
<div id="pageHeader">
<!--the rest of your HTML...-->
Then, your CSS:
#yellowBar {
height: (set appropriate height here);
background: yellow (set appropriate hex code here);
position: absolute;
top: (set appropriate top value so the #yellowBar nudges up against the #pageHeader visually);
width: 50%;
left: 0px;
}
#pageHeader {
height: (same height as #yellowBar);
background: (same color as yellowBar);
width: 80%;
/*any other CSS rules*/
}