I've got a fairly simple page where I want to create something like this:
[------------------div - 100px filler color-----------------]
[------------------h1 - height 100px----------------------]
[--------------- div - 100%-(100px+100px)-------------]
The HTML I'm working with is:
<body>
<div id="header">
</div>
<h1>Big Old Text</h1>
<div id="footer">
</div>
</body>
The CSS is:
body {
margin: 0px;
padding: 0px;
}
.background {
/* background: url(rotate.php) no-repeat center fixed; */
background: url(background_image_05.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#header {
background-color: rgba(255,0,255,0.10);
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
h1 {
letter-spacing: 0.1em;
font-size: 72px;
text-align: center;
padding-bottom: 25px;
padding-top: 30px;
display: block;
position: relative;
height: 100px
}
#footer {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(255,0,255,0.10);
}
I don't want any scroll bars. I tried to modify a version of this earlier answer, but it's not quite working out the way I want it to.
I was trying to understand what you are looking for...
HTML:
<body>
<div id="wrapper">
<div id="header">
</div>
<h1>Big Old Text</h1>
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
*{box-sizing:border-box;}
body{
margin:0;
padding:0;
}
#content{
width:100%;
position:absolute;
top:200px;
bottom:100px;
border:red 2px solid;
}
You could also see the example here: http://jsfiddle.net/dZEQQ/3/
I hope this is what you are looking for(pay attention to #content styles).
Related
So I have a container over my div element, but I can't remove it. I have to adjust the div below so I get rid of the white spaces on left and right using negative margins. However when I am trying to add negative margin from left and right, the div shifts only to left. What am I doing wrong?
body {
margin: 0px;
}
.container {
padding: 0px 20px;
}
.background {
height: 650px;
width: 100%;
background: red;
margin: 0px -20px;
}
<div class="container">
<div class="background">
test
</div>
</div>
body {
margin: 0px;
}
.container {
padding: 0px 20px;
position: relative;
}
.background {
position: absolute;
top: 0;
left:0;
right: 0;
bottom:0;
height: 650px;
width: 100%;
background: red;
}
<div class="container">
<div class="background">
test
</div>
</div>
So I have two dives under each other and I would like to have the 2 background images aligned. The with of both images are the same but the hight is different. (the second image should repeat instelf (ideally have a javascript that would load it while scrolling).
So I was able to align the images but scaling is problem (fixed size right now).
Does anybody knows how to do it?
Here is my code so far
#extends('layouts.application')
#section('styles')
<style type="text/css">
.bgimage{
background-image: url('{{ asset('/images/bg/logo.png') }}');
background-attachment: fixed;
position: relative;
background-position: left;
background-position: left;
top: 0;
left: 0;
background-color: white;
width: 100%;
height: 100vh;
}
.image {
background-image: url('{{ asset('/images/bg/stripe.png') }}');
background-attachment: fixed;
position: relative;
background-position: left;
background-repeat: repeat;
top: 0;
left: 0;
background-position: left;
background-color: white;
width: 100%;
height: 50vh;
}
</style>
#endsection
#section('layout-content')
<div class="bgimage" > </div>
<div class="image"> </div>
<!--/End Footer -->
#endsection
#section('scripts')
#endsection
Thanks allot
I am not sure whether I got the requirement completely, but here is an attempt :
https://jsfiddle.net/wkjys4cu/1/
.outer-container {width: 900px;position: relative;}
.box {
width: 50%;
height: 250px;
background-image: url('https://www.w3schools.com/cssref/img_tree.gif');
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
.box1 {
outline: 1px solid black;
background-size: 50% 50%;
background-position: 50% 60%;
}
.box2 {
outline: 1px solid red;
background-size: 50% 75%;
background-position: 20% 80%;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="outer-container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
The header on my website contains an image set as the background, with the HTML output as below -
<div id="header-container">
<div class="inner">
<h1>
<a title="Go home..." href="http://home_url">Blog title</a>
</h1>
</div>
</div>
The method works just fine, but I'm having issues with mobile devices as my header image is 432px wide.
Because of this I need to amend the code below so that the image reduces in size should the available width of #header-container .inner be less than the width ofthe background image.
I've tried several things, including using background-size: cover; and max-width, but I cannot seem to find a working combination.
How can I overcome this issue?
Here is a JS Fiddle showing the issue. Just reduce the size of the rendered view to see that the image does not shrink.
And here is the CSS that I am using -
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
-moz-background-size: 432px auto;
-webkit-background-size: 432px auto;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#header-container .inner h1 a{
display: block;
height: 85px;
text-indent: -9999px;
width: 432px;
}
You should use background-size: contain, not background-size: cover, in combination with min/max-width.
Change your CSS like this.
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
height: 85px;
margin: 0;
max-width: 432px;
}
Sample snippet
#header-container{
background-color: #053525;
border-bottom: 1px solid #4DC386;
padding: 10px 20px;
position: relative;
width: 100%;
box-sizing: border-box;
}
#header-container .inner{
margin: 0 auto;
max-width: 1000px;
position: relative;
}
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
max-height: 85px;
margin: 0;
max-width: 432px;
position: relative;
}
#header-container .inner h1:before {
display: block;
content: "";
width: 100%;
padding-top: 20%;
}
<div id="header-container">
<div class="inner">
<h1>
</h1>
</div>
</div>
#media query might help here:
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#media (max-width: 432px){
#header-container .inner h1{
background-size: cover;
}
}
You can use media queries for mobile devices. Like:
#media all and (max-width: 540px){
#header-container .inner h1{
-moz-background-size: 260px auto;
-webkit-background-size: 260px auto;
background-size: 260px auto;
width: 280px;
}
#header-container .inner h1 a{
width: 260px;
}
}
You can force this by avoiding the background image altogether as you replace it with a regular image in the <img> tag. Layer containers of content (one with the image and another with text) on top of each other with absolute position and z-index. It's a workaround to the background image problems I've experienced similar to yours and the layers provide nice flexibility for managing content.
#z1 {
z-index: 1;
}
#z2 {
z-index: 2;
padding: 5%;
color: white;
}
#z1, #z2 {
position: absolute;
left: 0px;
top: 0px;
}
<div id="outer">
<div id="z1">
<img width="100%" src="http://www.verolago.com/blog/wp-content/uploads/2013/11/sailboat.jpg" />
</div>
<div id="z2">
<p>I'm on a boat!</p>
</div>
</div>
Good afternoon!
I am trying to make this work - I have one <div> with position: absolute and height: 100%; min-height: 100%; so height is auto. And I would like to place another <div> after this one, but I don't know, how many % should I use at margin-top, or which kind of position...
Here is my code, I would be glad for every advice! Thanks!
HTML:
<div id="content">
...text text text...
</div>
<div class="clr"></div>
<div id="copyright">
text text...
</div>
CSS:
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100%;
background: url('bg_blue.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.clr {
clear: both;
}
#copyright {
position: static;
margin: 0 auto;
width: 100%;
height: 200px;
background-color: black;
}
Yes It is possible easily by position: relative; and float: left;
I've solved it with position: relative; and float: left;
So all of the posts I have seen are on getting your element NOT to resize or move, but the problem I am having with mine is that my element will NOT resize or move. The div called headLogo which contains the logo as the background will not move/resize with the parent div that contains it when zoomed in or out in the browser.
Here is the CSS:
#headContainer {
height: 134px;
background-image: url('images/main-bg.jpg');
background-repeat: repeat-x;
overflow: hidden;}
#headWhiteImage {
position: relative;
height: 134px;
background: url('images/header-bar.png') no-repeat 50% 0 transparent!important;
z-index: 10;}
#headLogo {
position: absolute;
height: 62px;
width: 333px;
background: url('images/logo2.png') no-repeat;
left: 133px;
top: 10px;
Here is HTML:
<div id="headContainer">
<div id="headWhiteImage">
<div id="headLogo">
</div>
<div id="headMenu">
</div>
</div>
</div>
I figured it out. To position the logo, it needed to be in a container itself, and then float the actual logo to make it move with the zoom.
Here is the HTML:
<div id="headContainer">
<div id="headWhiteImage">
<div id="headBarContainer">
<div id="headLogo">
</div>
<div id="headMenu">
</div>
</div>
</div>
</div>
Here is the CSS:
#headContainer {
height: 134px;
background-image: url('images/main-bg.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
#headWhiteImage {
position: relative;
height: 134px;
background: url('images/header-bar.png') no-repeat 50% 0 transparent!important;
z-index: 10;
}
#headBarContainer {
position: relative;
height: 75px;
width: 960px;
background-color: transparent;
margin: 0 auto;
padding-top: 10px;
}
#headLogo {
height: 62px;
width: 333px;
background: url('images/logo2.png') no-repeat;
float: left;
margin-left: -27px;
}