I'm somewhat new to html but im tyring to have a transparent background image and in the body have div containers that show the background image just not transparently.
I want to say, "do the opposite", but I really need more information (or an example).
If you used one background image and set specific classes up for the divs that can see the image, would you be able to get the effect you want?
CSS example:
html body { background-image: url("myimage.jpg"); }
div { background: #FFFFFF; }
.peek { background: transparent; }
HTML example:
<body>
<div> section with white background (blocks the background image), contains text </div>
<div class="peek"> section that exposes the background image, reveals different aspects of the background when the page is scrolled </div>
Please let me know if I understood what your goal was.
To my understanding you're looking for something like this:
<style>
* {
color: white;
}
.background {
width: 100%;
height: 100%;
position: relative;
background-image: url('https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.side {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
float: left;
background-color: red;
}
.main {
width: 60%;
height: 100%;
position: relative;
display: inline-block;
float: left;
background-color: transparent;
}
.top, .spacer, .bottom {
width: 100%;
height: 20%;
position: relative;
display: inline-block;
float: left;
background-color: red;
}
.content {
width: 100%;
height: 20%;
position: relative;
display: inline-block;
float: left;
}
.section-one {
background-color: rgba(0,0,0,0.5);
}
.section-two {
background-color: rgba(0,0,0,0.25);
}
</style>
<div class="background">
<div class="side">THIS IS WHITE</div>
<div class="main">
<div class="top">THIS IS WHITE</div>
<div class="content section-one">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>
<div class="spacer">THIS IS WHITE</div>
<div class="content section-two">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>
<div class="bottom">THIS IS WHITE</div>
</div>
<div class="side">THIS IS WHITE</div>
</div>
Related
I have 2 div's, one after the other. When i move first div with postion: relative and top: -60px it creates gap between them.
Here is example: https://codepen.io/dusannis/pen/oNgBpoK
As you can see there is gap between red and yellow div. Is there some css property that I can add to parent div that can remove this gap, or something simillar?
This is HTML:
<body>
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
</body>
This is CSS:
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
position: relative;
top: -50px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
Use negative margin instead of relative positioning.
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
/* position: relative; --> not required */
margin-top: -50px;
/* change this */
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
Codepen Demo of the effects of various methods of "moving" elements:
"Relative Position vs Margin vs Transform".
You can try add same top/position to the second div:
.div-1 {
padding: 60px;
position: relative;
top: -60px;
background: red;
}
.div-2 {
position: relative;
top: -60px;
height: 50px;
background: yellow;
}
Alternatively you can add internal div and use padding for that one, then get rid of padding for the parent and the body (or adjust to the real value if you want it):
<body>
<div class="container">
<div class="div-1">
<div class="div-1-inside">
something here
</div>
</div>
<div class="div-2"></div>
</div>
</body>
body {
background: blue;
padding: 10px;
}
.div-1 {
position: relative;
background: red;
}
.div-1-inside {
padding: 60px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
So i have a background image, i need to put an horizontal white strip over this background image, in order to put a title into the strip. I know how to make boxes over an image on CSS but i'm having an hard time making this strip, it must not be a box, it has to cover the whole background image from the left margin to the right margin of the image, any idea?
Here is the piece of code involved:
.title-image {
position: fixed;
height: 230px;
margin-top: -16px;
margin-left: -20px;
}
h1 {
background: white;
position: absolute;
font-family: Play;
color: #c76161;
}
<div class="title">
<img class="title-image" src="" alt="">
<h1>Title</h1>
</div>
You can simply use multiple background like this:
.box {
width:200px;
height:200px;
line-height:200px;
font-size:20px;
text-align:center;
background:
linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8))0 50%/100% 80px no-repeat,
url(https://lorempixel.com/200/200/);
}
<div class="box">
some text
</div>
Use flexboxes and background images
body{
margin: 0;
padding: 0;
}
.image{
width: 250px;
height: 250px;
background-color: red;
display: flex;
align-items: center;
}
.title_container{
width: 250px;
background-color: green;
text-align: center;
}
<div class="image"><div class="title_container"><h1 class="title">Test</h1></div></div>
Replace background-color: red; by background-image: url("yourimage.png");
I created a div based table. I'm trying to take a image, put it in top left table cell and make it responsive. I've made it responsive, but its not in the table cell I want it to be. Any help?
JSFiddle:
https://jsfiddle.net/benjones337/3c4fkb78/18/
HTML
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell"><p class="rspimg1"></p></div>
<div class="hmTableCell"><p class="rspimg2"></p></div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
CSS
.hmTable {
margin: 0 auto; /* or margin: 0 auto 0 auto */
display: table;
width: 50%;
}
.hmTableRow {
display: table-row;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
position:relative;
}
.hmTableBody {
display: table-row-group;
}
.rspimg1{
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png");
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
position:absolute;
}
.rspnimg2{
}
When using background-image, the div doesn't grow with the image, so you will need to give it a height/width, either to the cell or the image div (btw, I changed your p to div, as p is for text rather than image).
Below sample I'm pretty sure look close to what you are after, and If not, drop me a comment and I'll fix it for you.
html, body {
margin: 0;
height: 100%;
}
.hmTable {
margin: 0 auto;
display: table;
width: 50%;
height: 30%;
}
.hmTableRow {
display: table-row;
height: 10%;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
}
.rspimg1{
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png") center no-repeat;
background-size: contain;
width:100%;
height:100%;
}
.rspnimg2{
}
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell">
<div class="rspimg1">triangle</div>
</div>
<div class="hmTableCell">
<div class="rspimg2">square</div>
</div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
Remove position:absolute or add top:0 to .rspimg1.
Result
I'm new to bootstrap. I have simple page with a header (which has background image) and logo.
I have two questions
How to hide background image of the header tag and center the logo if <768px
How to resize the background image depending of the viewport size?
Here's the code I have
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<img src="images/logo.png" alt="" />
</header>
</div>
</div>
</div>
css
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
}
Use like this:
For hiding background image of the header tag and center the logo:
CSS:
#media (max-width: 767px) {
body header {
position: relative;
width: 940px;
height: 200px;
background: none;
margin:0 auto;
}
body header img {
position: absolute;
top: 2px;
right: 2px;
display: none;
}
}
try background-size:contain; for resizing your image
body header {
position: relative;
width: 940px;
height: 200px;
background: url(../images/header-bgr.png) no-repeat;
background-size:contain;
}
It is always clearer if you provide jsfiddle or codepen with your actual code.
When you already have a container class on top, you don't really have to define another header with static width. Either it can be 100% or use container class on header. Your structure can basically be reduced to this form.
HTML:
<header class="container">
<figure>
<img src="http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" class="img-responsive" alt="logo">
</figure>
</header>
CSS:
* {
box-sizing: border-box;
}
header {
width: 100%;
background: url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') no-repeat;
background-size: cover;
background-position: center center;
height: 200px;
border-bottom: 1px solid #999;
position: relative;
padding: 30px 0;
figure {
max-width: 200px;
margin: 0px auto;
position: relative;
}
#media (max-width: 768px) {
& {
background: none;
min-height: auto;
figure {
img {
margin-top: 00%;
}
}
}
}
}
http://codepen.io/gorkhali/pen/azjVev
I have 3 divs in wrapper. I want 2 of them to stick to top-left and they need to be under each other. Third div needs to stick to top-right, but doesn't stick to top.
This is how I tried to do it but failed: http://jsfiddle.net/TZ82X/
<div id="wrapper">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
<div id="nav">Navigation</div>
</div>
CSS:
#wrapper {
background: #CCC;
width: 500px;
height: 250px;
margin: auto;
}
#logo {
background: tomato;
width: 300px;
height: 20px;
float: left;
}
#motto {
background: sienna;
width: 300px;
height: 20px;
float: left;
clear: left;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
}
This is 1st fix with rearranging of divs in .html: http://jsfiddle.net/KJG9q/
<div id="wrapper">
<div id="nav">Navigation</div>
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
This is 2nd fix with another container div: http://jsfiddle.net/x98Mf/
<div id="wrapper">
<div id="logo-motto-container">
<div id="logo">Logo</div>
<div id="motto">Motto</div>
</div>
<div id="nav">Navigation</div>
</div>
CSS:
#logo-motto-container {
float: left;
I don't want to rearrange elements in .html because I want them arranged properly for styling for mobile, I could go with another wrapper div but I want to know why the first method didn't work and if is there a fix for it without messing in .html and keeping template flexible (without position: relative)?
I have modified your fiddles so as to give you what you want to do.
The following link is the modified version of your first fix fiddle. I have just played with the css properties and not moved any of your html div's as you wanted.
Fiddle Link
#nav {
background: seagreen;
width: 100%x;
height: 40px;
}
Remove float: right; from #nav.
#nav {
background: seagreen;
width: 200px;
height: 40px;
}
#nav {
background: seagreen;
width: 200px;
height: 40px;
float: right;
position: absolute;
}