On this site: http://www.effic.be/wordpress/
I have an arrow that points to the first widget on the homepage.
This is the code:
1. HTML
<div class="home-full">
<div class="home-top">
<div class="site-inner">
<div class="wrap">
<div class="home-bottom">
<section id="featured-page-advanced-2">Widget 1 content</section>
<section id="featured-page-advanced-3">Widget 2 content</section>
<section id="featured-page-advanced-4">Widget 3 content</section>
</div>
</div>
</div>
</div>
</div>
2. CSS
.home-full {
background-image: url(/wordpress/wp-content/themes/enterprise-pro/images/arrow.png);
background-position: 36% 47%;
background-repeat: no-repeat;
}
.site-inner {
position: relative;
z-index: -999999;
}
.home-bottom {
position: relative;
z-index: 999999;
}
I need the arrow to display as it is now. It starts in the "home top" div and points to the "featured-page-advanced-2" section. That's why I added the "home full" div with the arrow background.
My problem: my widgets (titles and buttons) are no longer clickable. The z-index causes the "home-full" div to be in front.
Is there a way to resolve this? I spent all afternoon on it : )
Thank you!
Stefaan
I was not able to make it through fiddle so I made these changes using firebug, this is the same as I mentioned above and the arrow is showing please go through it maybe u missed something out and please call me Ameen :)
Instead of adding the arrow to the home-full div add the arrow to the "home-top widget-area" div using :before or :after and give position relative to this parent and remove the z-index : -9999px from the .site-inner div
home-top widget-area{
position:relative
}
home-top.widget-area:after{
position:absolute;
bottom:0;
left:55px;
content:'';
background:url("/wordpress/wp-content/themes/enterprise-pro/images/arrow.png") no-repeat;
width:57px;
height:101px;
}
If the arrow is still hidden behind the lower div section trying increasing z-index in the :after css code
Did you try this :
background-size : cover
The background-size property specifies the size of the background images. Syntax :
background-size: auto|length|cover|contain|initial|inheri
Doc : http://www.w3schools.com/cssref/css3_pr_background-size.asp
Related
I'm wondering why the background image is behaving in this way even though I set the image as a background image in CSS:
In my HTML file, for the location section, the only content I have are paragraphs. However, the text does not appear above the background image.
I have never encountered this issue before. Would appreciate it if anyone can point out any possible cause of this.
HTML and CSS code snapshots are shown below.
.Location {
background-image: url("https://images.pexels.com/photos/586744/pexels-photo-586744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width:90%;
height:500px;
margin:0 auto;
color: white;
}
<div class="Location">
<article>
<p>Downtown</p>
<p> 384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</article>
</div>
If your goal is to set an the <article> element in the image:
.Location article {
//set position relative to its parent container in this case <div class="location">
position: relative
//positions element on top of div
z-index: 1;
//positions it in upper left corner
top: 0;
left: 0;
}
Hope you found this helpful :)
this should work unless there are other styles affecting your code
see codesandbox
I have the following HTML structure:
<section class="mysection">
<div class="parallax">
<div>
<svg></svg>
</div>
</div>
</section>
<section class="back">
<div class="triangle">
<img src="img/red-triangle-bkgrd.png">
</div>
</section>
This is the CSS in LESS:
.parallax{
width: 90%;
margin-left: auto;
margin-right: auto;
}
section.back {
.triangle {
position: relative;
img {
position: absolute;
right:0;
top: 0;
}
}
}
Before using parallax on the parallax, back just sits immediately below the bottom border of mysection.
When I scale parallax by 1.11111111, the parallax uses 100% width of the viewport. However, back does not sits right beneath the parallax anymore. Instead, it overlaps with the parallax area. Here is a picture of a real-life situation:
How can I make back in the overlap area invisible? Put it another way, how can I make svg or its containers completely opaque without showing the overlaped image beneath it?
I tried 'opacity:1` on svg and its containers, but it is not working.
To be more detailed, I use a tool called ScrollMagic for this work if this is relevant.
You can set the stacking order using z-index. Try setting the following:
.mysection {
position: relative;
z-index: 1;
}
This should ensure that whatever's in your .mysection (such as the svg/map) passes over whatever intersects (assuming you don't apply a greater z-index to the other elements).
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
I've put some text on top of an image inside a container div, in a responsive layout. I'd now like to create a "rollover" effect where on mouse over the text gets a transparent green background-color covering the entire div / image. Hence the image looks a bit green.
See http://www.advocatedesign.co.uk/
Any help would be gratefully received!
You're going to need another div that you can use as the "overlay" layer.
JSFiddle Example
(In the future, please include a JSFiddle within your question with the relevant code as it helps everyone who is helping you)
HTML
<div class="case_study">
<div class="overlay"></div>
<a href="small-woods.html">
<img src="http://lorempixel.com/400/200/" alt="Small Woods case study">
<p>Small Woods</p>
</a>
</div>
CSS:
.case_study{
position: relative;
height: 200px;
width: 400px;
}
.case_study:hover .overlay{
background-color:green;
opacity: .3;
height: 100%;
width: 100%;
position: absolute;
}
Please comment on this answer because I'm not sure exactly what you want...
but are you looking for the hover selector?: http://www.w3schools.com/CSSref/sel_hover.asp
Set the class to hover and stick the desired background-color in there:
P:hover
{
background-color:green;
}
Some pages contain page-header element/class.
.page-header class look like this:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
}
For Example:
index.html
<div class="page-header">
<h1>Homepage</h1>
</div>
about.html
<div class="page-header">
<h1>About</h1>
</div>
I want to add small image on top of the page-header using css, each page will have different image. How to do this and should I use span with css ?
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds
Yes you can add a SPAN and give the image,
NOTE: if you give any image to the header as a background, it will not useful to SEO, I suggest same image keep in IMG tag and out of the screen to get some SEO help too.
Ex:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
position:relative;
}
.out-of-screen {
position:absolute;
top:-2000em;
}
<div class="page-header">
<h1>Homepage</h1>
<img src="/public/images/page-header.png" alt="alt text" class="out-of-screen">
</div>
If your looking for a secondary background image to be overlaid on the previous background image. Then try this. I haven't tried it myself but it may be the answer.
.page-header:after{
background-image:url('/public/images/page-header2.png' no repeat;
}
You may need to position the :after to where you want it on the page but it maybe easier to stick with the simple image tag as Sameera has suggested if you want the image to be in a certain location within the element.
position:fixed;
left:0;
top:30%;
width:200px;
height:auto
<div class="page-header">
<h1>Homepage</h1>
<img src="path/to/image.jpg" alt="" style="position:absolute; left:50px; top: 50px;" />
</div>
there is a css property calles z-index.
The higher the value the most 'front' it will be.
The lower the more Back t will be
Négative value are okay.
.front{
z-index: 999;
}
.back{
z-index: 0;
}
NOTE: different-browser seems to have different behaviour.
To answer your question, Give a z-index lower to your header and add an elemt (span would be good) with an higher z-index
Use Multiple Backgrounds with CSS3.
Add padding-top to .page-header position page-header.png to bottom and
place second background at top.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
http://www.css3.info/preview/multiple-backgrounds/
CSS allows us to add multiple backgrounds images just by adding a comma (,) between them.
HTML
<div class="bg-image">
CSS
.bg-image{
outline: 2px solid black;
padding:20em;
background-image:
url(https://images.unsplash.com/photo-1634148739677-a5bb54df2611?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80),
url(add another ".svg img" or any type of image);
background-repeat: no-repeat, repeat;
background-position:right 20% center 0px, top left;
background-size:auto, 10px;}