Please have a look at this. If the background positioning (left wrapper right top, right wrapper left top) worked, the gas pumps would fit neatly besides the content box. But they don't and I cant seem to find out why...
HTML
<body>
<!-- navigation stuff -->
<div class="w3-row">
<div id="fill-left" class="w3-col s1 m2 l3"> </div>
<div id="main" class="w3-col s10 m8 l6">
<div id="content" class="w3-container w3-white">
<p>Lorem ipsum
</div>
</div>
<div id="fill-right" class="w3-col s1 m2 l3"> </div>
</div>
</body>
CSS
#fill-left {
z-index: -1;
background-image: url(bgleft.jpg);
background-attachment: fixed;
background-position: right top;
}
#fill-right {
z-index: -1;
background-image: url(bgright.jpg);
background-attachment: fixed;
background-position: left top;
}
div#main {
z-index: 1;
box-shadow: 0px 0px 100px #000;
}
Note: the w3-xxx classes stem from a CSS library called W3.CSS; used by me for simple responsive site layouting. Don't hate me...
tj;dr
What I precisely need is to put the fixed point of the bg-image to the top directly next to the content - making the background stretch out from the conent area.
I had a look at this, and solved it by re-jigging the html (still used your w3.css but added classes for the backgrounds). I removed the background-attachment:fixed; and added a no-repeat and background-size to the background.
Hope this helps
#fill-left,
#content,
#fill-right {
display: inline-block;
width: 33%;
height: 100px;
padding: 0!important;
position: relative;
}
.bg1 {
vertical-align: top;
z-index: -3;
background-image: url("http://www.rachelgallen.com/images/purpleflowers.jpg");
background-position: left top;
background-repeat: no-repeat;
//float:left;
}
.bg2 {
vertical-align: top;
z-index: -3;
background-image: url("http://www.rachelgallen.com/images/yellowflowers.jpg");
background-size: cover;
background-position: right top;
background-repeat: no-repeat;
float: right!important;
}
#main {
width: 100%;
height: 100%;
z-index: 1;
box-shadow: 0px 0px 100px #000;
}
#content {
background-color: transparent!important;
background-position: center top;
z-index: 0;
}
p{
text-align: center;
color: #8B0000;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div id="main" class="w3-row">
<div id="fill-left" class="bg1 w3-col s1 m2 l3"> </div>
<div id="content" class="w3-container w3-white">
<p>Lorem ipsum</p>
</div>
<div id="fill-right" class="bg2 w3-col s1 m2 l3"> </div>
</div>
To get the content to show up in a more proper manner, I switched up the images and the positioning. I also added a background-size:contain; to both elements. As for responsiveness, I would setup a media query to allow these images to disappear when that menu does as well. I also noticed that the menu items are wrapping quite a bit before the menu disappears. Just a heads up in case you haven't noticed that yet.
#fill-left {
z-index: -1;
background-image: url(bgright.jpg);
background-size: contain;
background-attachment: fixed;
background-position: left;
}
#fill-right {
z-index: -1;
background-image: url(bgleft.jpg);
background-size: contain;
background-attachment: fixed;
background-position: right;
}
Related
I have placed a background image inside a div but would like it to be an active link to another page, and also maybe light up when hovered over. Here is the HTML & the CSS, any help would be greatly appreciated! thanks...
<div class="col-sm-4 img1">Football</div>
.img1 {
background-image: url(https://....);
background-repeat: no-repeat;
background-size: cover;
EDIT: full code;
.img1 {
background-image: url(https://images.unsplash.com/photo-1472108482137-8df36ccf0d7b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
background-repeat: no-repeat;
background-size: cover;
font-weight: bolder;
font-size: xx-large;
}
.img2 {
background-image: url(https://cdn.pixabay.com/photo/2015/05/28/16/37/sport-788105_960_720.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-size: cover;
font-weight: bolder;
font-size: xx-large;
}
.img3 {
background-image: url(https://images.unsplash.com/photo-1528543606781-2f6e6857f318?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80);
background-size: 80%;
background-repeat: no-repeat;
background-size: cover;
font-weight: bolder;
font-size: xx-large;
}
<!-- Containers center and horizontally pad your content -->
<div class="container-fluid">
<!-- create row inside container / row is wrapper for column-->
<div class="row">
<!-- now create 3 columns with small breakpoint -->
<div class="col-sm-4 brdcol img1"> Water Sports</div>
<div class="col-sm-4 brdcol img2">Football</div>
<div class="col-sm-4 brdcol img3">Hiking</div>
<!-- columns centred in page with parent container -->
</div>
</div>
All you need to do to have a clickable image - is to wrap your div element(the one with background image) with anchor tag, like this:
<div class="col-sm-4 img1">Football</div>
You need a single anchor tag with some CSS.
<a class="photo" href="website.net/link"></a>
CSS
.photo {
background-image: url('http://www.thinksnaps.com/wp-content/uploads/2014/07/images-background.jpg');
background-size: 300px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
background-clip: border-box;
transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: block;
width: 190px;
height: 190px;
text-decoration: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
white-space:nowrap;
}
.photo:hover {
background-size: 500px;
}
Here's my page:
The problem is, my Jumbotron placed on the upper side of the page. I want to move it to the center (a little down below). I tried overriding margin and padding but it still didn't work. How would I do that?
Here's my HTML
<div class="col-md-6">
<div class="welcome-page-eat">
<div class="jumbotron">
<h2>
Hello, world!
</h2>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
</div>
</div>
And here's my CSS:
.welcome-page-eat {
background: url(../images/front_page/eat.jpg) no-repeat right 0;
margin-right: -15px;
margin-left: -15px;
padding-bottom: 62.5%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.welcome-page-cook {
background: url(../images/front_page/cook.jpg) no-repeat right 0;
margin-right: -15px;
margin-left: -15px;
padding-bottom: 62.5%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron {
background-color: transparent;
color: white;
}
Try using:
.jumbotron {
background-color: transparent;
color: white;
margin: auto;
width: 90%;
}
Maybe this article can help you: W3CSchools | CSS Margin
Been searching for hours now. I want flexslider for a kind of banner rotator on a page. I managed to get a fixed height for the images. But the width of the images get stretched to the browsers borders left and right. I believe what i want is some kine of "overflow: hidden". If browser_width > img_width: show background left and right from the image. If browser_width < img_width: Cut of parts from the image on left and right side. All ways keep the aspect ratio.
Currently the image gets stretched/shrinked horizontally.
HTML
<div class="flexslider">
<ul class="slides">
<li>
<div class="flexslider_image">
<img src="/images/alnwick-castle-92607.png" />
</div>
</li>
<li>
<div class="flexslider_image">
<img src="/images/server-90389.png" />
</div>
</li>
</ul>
</div>
CSS
.slider_container {
margin-top: -120px;
}
.flexslider {
border: none !important;
box-shadow: none;
margin:0px;
padding: 0px;
}
.slides li {
background-position: center;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flexslider_image {
}
.flexslider_image img {
height: 500px;
}
After searching for some more hours i found a solution.
Do not use an img-tag for the image. Instead use a div with a background image. For details see my html and css.
Another advantage i was locking for anyway is, that one can now more easily place content on the slides.
HTML
<div class="flexslider">
<ul class="slides">
<li>
<div class="flexslider_background" style="background: url('/images/server-90389.png') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 2
</p>
</div>
</div>
</li>
<li>
<div class="flexslider_background" style="background: url('/images/minecraft-938604.png') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 3
</p>
</div>
</div>
</li>
<li>
<div class="flexslider_background" style="background: url('/images/minecraft-669310.jpg') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 4
</p>
</div>
</div>
</li>
</ul>
</div>
CSS
.slider_container {
margin-top: -120px;
}
.flexslider {
border: none !important;
box-shadow: none !important;
margin:0px !important;
padding: 0px !important;
margin-bottom: 10px !important;
background-color: #eee !important;
}
.slides li {
background-position: center;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flexslider_background {
height: 500px;
text-align: center;
}
.flexslider_content {
display: inline-block;
margin-top: 145px;
height: 350px;
width: 1000px;
border: 3px solid black;
}
.flexslider_content p {
float: left;
font-size: 2em;
}
The section has a background image with content on top.
I want to decrease the brightness of only the background image in the section and not the content.
I have tried the below, however, the brightness still applies to all and not just the image.
<!-- Section -->
<div id="section1">
<div id="content">
<h1 class="heading">headline text</h1>
<h4 class="subHeading"> Sub-headline text</h4>
<!-- Call to action button -->
<br><br>
<button> Join our wait list </button>
</div>
#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
padding-top: 100px;
padding-bottom: 100px;
padding-left: 10%;
padding-right: 10%;
color: white;
text-align: center;
}
#content {
-webkit-filter: brightness(1);
filter: brightness(1);
}
You can add a new element of transparent black that overlays just the background, with the contents of your div sitting in front of it.
<div id="section1">
<div id="content">
</div>
</div>
CSS:
#section1 {
background: url('../images/headerimage1.jpg') center center no-repeat;
background-size: cover;
position: relative;
}
#content {
position: absolute;
}
#section1::before {
content: '';
display: block;
position: absolute;
background-color: #000;
opacity: 0.5;
width: 100%;
height: 100%;
}
I have four categories in my solutions page, Oil&gas, utilities, Inteligent building,
Industrial Engineering.
I have put a hover effect on each category there is a main div
called pic_categry(while hover the background colour change). And I have'
also put an hover effect in child div of pic_categry called pic_catgry_img1. My
problem is when I hovering the parent div(pic_categry) the hover effect of
pic_catgry_img1 is not working its working only hover that div. How can I display both hover effect when hovering parent div (pic_categry).
HTML:
<div id="wrapper4"> <a href="oil_n_gas.php">
<div class="pic_categry">
<div class="pic_catgry_img1"></div>
<div class="pic_catgry_title">Oil N Gas</div>
</div>
</a> <a href="smart_meter.php">
<div class="pic_categry">
<div class="pic_catgry_img3"></div>
<div class="pic_catgry_title">Utilities</div>
</div>
</a> <a href="inteligent.php">
<div class="pic_categry">
<div class="pic_catgry_img2"></div>
<div class="pic_catgry_title">Intelligent Building</div>
</div>
</a> <a href="industrial_engineering.php">
<div class="pic_categry align_tab">
<div class="pic_catgry_img4"></div>
<div class="pic_catgry_title">Industrial Engineering </div>
</div>
</a>
</div>
CSS:
.pic_categry {
width: 233px;
height: 239px;
float: left;
text-align: center;
color: #425B97;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 3px;
margin-right:23px;
}
.pic_categry:hover {
background-color:#e8e8e8;
border-radius:4px;
color:#263a87 !important;
}
.pic_catgry_title {
font-family:'Varela', sans-serif;
font-size:20px;
text-align:center;
padding-bottom: 10px;
}
.pic_catgry_title:hover {
color:#263a87;
text-decoration:none !important;
}
.pic_catgry_img1 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img1:hover {
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img2 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img2:hover {
background-image: url(../images/new/ind_smart.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img3 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img3:hover {
background-image: url(../images/new/ind_utlts.png);
background-repeat: no-repeat;
background-position: left bottom;
}
.pic_catgry_img4 {
width: 157px;
height: 128px;
margin: 0px auto;
background-image:url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left top;
}
.pic_catgry_img4:hover {
background-image: url(../images/new/ind_heavy.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Just change your code like this:
.pic_catgry_img1:hover{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
to
.pic_categry:hover .pic_catgry_img1{
background-image: url(../images/new/ind_oil.png);
background-repeat: no-repeat;
background-position: left bottom;
}
so you can apply hover effects changes on child div while mouse enters parent div.
change the background color and use your desired image
.pic_categry > .pic_catgry_img1:hover{background-color:#FF0000;}
try
.pic_categry:hover .pic_catgry_img1{
background-position: left bottom; //only need this
}
from #Atrem Fitiskin 's comment
change only dependent properties (in this case, only
background-position).