I basically made 960 layout with 3 divs to easily place child divs with images and text. For some reason I can't make the first background-image to display.
What am I doing wrong?
Website concept:
HTML
<div class="wrap">
<div id="left">1
<div id="logo"></div>
</div>
<div id="middle">2</div>
<div id="right">3</div>
</div>
CSS
html, body { background-image:url(../bg.png);
margin: 0;
padding: 0;
border: 0
}
.wrap {
background: #e7e7e7;
text-align: center;
width: 840px;
margin:auto;
padding-left:60px;
padding-right:60px;
}
#left, #middle, #right {
background: #ccc;
display: inline-block;
margin-right: -4px;
width:280px;
}
#logo {
display: block;
position: relative;
background-image:url(../logo.png));
width:40px;
height:40px;
}
background-image:url(../logo.png));
Should be...
background-image: url(../logo.png);
You may also want to use background-repeat: no-repeat; background-position: center center; and background-size: cover; to make proper use of the background of a div.
It looks like you have an extra parenthetic for background-image under #logo in the CSS file. Change it to background-image: url(../logo.png);
Related
Hi i have written css for fixed header that is banner image should be fixed when we scroll the page the content should be scrolled on the top of the image but if i give the background attachment as fixed the height of the image is getting small and getting blank space at the top as shown in below diagram.
Css i have written this
.partnerspage {
background-image: url(http://www.server.com/bl/banner-1920x375-Partners.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
Here is the fiddle link: https://jsfiddle.net/xykchmg9/1/
Whatever you are looking for here it is: this css can fix your problem I hope
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
.parallax {
background-image: url("https://dmm8trq3la0u4.cloudfront.net/wp-content/uploads/2018/06/how-to-setup-website.jpg");
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.contain{
height:1000px;
background-color:#ccc;
font-size:36px;
padding:24px;
}
Html goes here...
<div class="navbar">
Home
News
Contact
</div>
<div class="main">
<div class="parallax"></div>
<div class="contain">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</div>
Codepen example you can check it from here
background: transparent url(http://www.server.com/blue/br-banner11.jpg) 0% 0%/100% 70% no-repeat fixed;
i have fixed the background attachment by adding like this.
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>
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
First, my HTML markup:
<nav>
<section class="navabout">
ABOUT
</section><section class="navphotography">
PHOTOGRAPHY
</section><section class="navdesign">
DESIGN
</section>
</nav>
And my CSS code for it:
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
nav > section{
width: 33%;
height: 100%;
display:inline-block; /*http://stackoverflow.com/q/11805352/1584286*/
font-size: 60px;
font-family: 'Bebas Neue', arial, helvetica, sans-serif;
}
nav > section.navabout{
background: url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
background-size: cover;
text-align: left;
}
nav > section.navphotography{
background: url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
background-size: cover;
text-align: center;
vertical-align: text-bottom;
}
nav > section.navdesign{
background: url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
background-size: cover;
text-align: right;
}
Question
I want the Photography font stick at the bottom of the section. So I found the CSS code vertical-align and read this article by CSS-Tricks. There is written the following:
In order for this to work, the elements need to be set alone a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set by the display property) elements.
So it should work in my code, then CSS-Tricks also say:
text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
But strangely, the other two sections' font are sticking to the bottom WITH the background image (so the whole section tag sticks to the bottom).
I thought, maybe it won't work because of the parent element font. So I set the value to bottom. But now nothing changed.
Can you help me to let the font of the Photography section stick to the bottom (only the font!)
PS: and yes I know, this CSS won't work in IE6 & 7, but my whole site will only work in modern browsers.
Codepen Demo for you
How about this for an alternative approach:
FIDDLE
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div>ABOUT</div>
</div>
<div class='cell'>
<div>PHOTOGRAPHY</div>
</div>
<div class='cell'>
<div>DESIGN</div>
</div>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
}
.table {
display:table;
width:100%;
height:100%;
font-size: 60px;
font-family:'Bebas Neue', arial, helvetica, sans-serif;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
text-align: left;
position:relative;
}
.cell:nth-child(1) {
background:url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
background-size: cover;
}
.cell:nth-child(2) {
background:url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
background-size: cover;
}
.cell:nth-child(3) {
background:url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
background-size: cover;
}
.cell > div {
position:absolute;
bottom:0;
}