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
Related
I'm trying to display html elements (forms, text, etc) on an image, which has been made transparent with gimp. But whatever I tried, the content is hidden by the image.
I've changed the page's background color just to be sure the browser wasn't changing the transparent part to white for some reason, and it does not.
I also have tried to play with the z-index property but this didn't work.
On reloading the page, I can see the text displaying correctly, but then the image displays and overlays it.
#foo{
position: relative;
}
#foo img{
width: 20%;
height: 20%;
}
#bar{
position: absolute;
}
<!DOCTYPE html>
<body>
<div id='foo'>
<img src='my_img' />
<div id='bar'>
<!--This is where I want to write what will be displayed on the transparent image.-->
</div>
</div>
</body>
I didnt find any similar situations, neither here neither on other websites so any suggestion is welcomed.
Edit: Actually I set the top and left CSS properties and it's now working fine.
Have you considered background-image?
#bar {
background-image: url('/path/to/myimg.jpg');
background-size: contain;
background-position: center center;
}
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 have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
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
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;}