I'm sure this is a basic question but I am a complete beginner so sorry ahead of time! I am building a website and I decided to add an image as my background with this code:
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
background-image: url('/images/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
background-size:cover;
opacity: 0.4;
filter:alpha(opacity=40);
}
<div id="background"></div>
However, when I add this, it doesn't allow me to interact with my contact me script or my embedded PDF.
code for pdf:
<center>
<iframe id="iframepdf" src="/documents/Resume.pdf" width="783px" height="1009"></iframe>
</center>
Help would be appreciated
The div you are using as your background is probably getting in the way of other things in the website. I would suggest using the tag for your background image
body{
background-image:url(background.jpg)
}
for a start you have way too much stuff in your background image css. If you want to cover a div, then use the div tag but if you want to cover the whole page
use
body {
background-image: url('/images/background.jpg');
background-size: cover;
opacity: 0.4;
filter:alpha(opacity=40);
}
Related
This has been annoying me now for a few hours as I keep fiddling around with the code and don't seem to be getting anywhere at all.
I really like the way that this website has a fluid image background:
Here
I have downloaded the code and am not currently trying to make a slideshow, but instead a single image background that when you play around with the size of your browser expands and contracts the same way as in the website.
If i take the code that they use in their CSS and apply it to my own image I keep getting this instead.
https://jsfiddle.net/9cpz4gua/
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
}
Could someone please advise me what to do in order to get my background image to expand and contract about the center as the website does?
Here is my answer, it may not be the easiest or the most complete but it give a very beautiful looking result that answers your question
Basically, you create a new div directly under your body
and style it this way:
.bgimg {
z-index: 1;
background: url(http://dondev.ovh/light_abstract.jpg);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
See it in action
This is a css only answer, you can use JavaScript alongside for better result.
Regards
If all you want is to have your image always fill the page, just remove some things from your own style to achieve the "cover" effect.
Try this:
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
color: transparent;
background-size: cover;
opacity: 0;
z-index: 0;
}
https://jsfiddle.net/9cpz4gua/2/
I'm trying to make a background image on the header section autosize but it won't keep to aspect ratios. Here is an example, the image gets the bottom of it cut off: http://i.imgur.com/sxedPHI.png or if I make it this size, space appears between it and the divs below header: http://i.imgur.com/xX1e4GZ.png I can almost seem to get it working but then it scales the picture to an odd aspect ratio and the image gets distorted: http://i.imgur.com/jtxDNr0.png
I would like the header section to be the EXACT same size as the image, then have the image always showing all of the image (not cutting off a portion) and no space between header and the next divs.
This is the code I have for the HTML part:
<header>
T
</header>
I believe this is the relevant CSS:
header {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
background-image: url("ball.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-size: 100% auto;
}
The site in question is here:
http://www.stoppiefail.com/boot/sites3/index.php
You are using background-size: 100% auto; at the end which will be overwriting your previous code.
https://jsfiddle.net/26ejdss6/1/
div{
width:400px;
height:187px;
background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg');
background-size:cover;
background-position:center;
}
Also, check out a neat plugin named backstretch.js. It's pretty nice for this kind of thing, especially when auto-sizing user added images in a CMS
http://srobbin.com/jquery-plugins/backstretch/
Instead of using Background Image why not use an IMG tag with an absolute div on top of it.
HTML:
<header>
<img src="your/background/image.jpg" class="bg">
<div class="headerContent">Your Header Content Goes Here</div>
</header>
CSS:
header {
width: 100%;
position: relative;
}
header img.bg {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
header .headerContent {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
I havn't tested this but it is just another way to do this outside of css, that would allow the height of the header never to be cut off.
The effect I'm trying to achieve is the first main picture on this website: http://shop.soot.me/
As far as I can tell, this is being achieved by background, not <img>. Is it possible to achieve this with the <img> tag? I tried my hand in it, but it's not exactly there.
https://jsfiddle.net/jzhang172/e1javm23/
.box{
width:100%;
height:500px;
background:black;
overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;
}
<div class="box">
<img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>
Here is a fiddle of code that fills the image to 100% of the width of the box container. https://jsfiddle.net/9pjxeo6o/
Is this what you are looking to do? The website that you referenced actually does use the background property to create the effect that you are talking about. I suspect that this is actually what you are wanting to do, rather than just using an image. This code handles the background cover:
.homepage-hero-video, .homepage-hero-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
The background-size: cover; stretches the image to the width of the container automatically.
I am new to HTML and need help on how to make the background scroll along with the page so that the background is constant and is not repeated like default.
Use this for your html body
body {
background-image:url('your image path') no-repeat;
position:fixed;
}
You may use fixed and / or absolute positions in CSS. If you have any code, please provide to go further in the answer. But generally this may suit your basic usage:
Markup
<body>
<div class="bg">
<div class="wrapper">
// other stuff here
</div>
</body>
CSS
.bg{
background-image: url( 'path/to/bg/file.jpg' );
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
Note
Please take a look at How to ask section of the community to improve ur SOF experience.
If you have add the background image on body the just use this css
body{
background-image: url( 'your_img_url' );
background-repeat: no-repeat;
background-size: cover;
position: fixed;
top: 0px;
left: 0px;
}
I'm looking to make my homepage a full screen centered background image, where it doesn't matter what screen size the device is, the image always covers the entire page and with the correct aspect ratio. I'd also like it to work across various devices.
I've seen various different ways to do this but i just don't seem to get the effect that i'm looking for. So i'm either doing things incorrectly or i just haven't found/thought about a solution that works.
Thanks
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Try the above code and switch html with any other element as required. So if you only want it on the body or something for example.
This was taken from this article on CSS Tricks -
CSS Tricks - Perfect Background Image
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Like that, you can still use the html image tag.
.div {
background: url('images/bg.jpg');
background-size: cover;
background-position: center;
}
And for responsive layout if you are new to this i suggest using Bootstrap framework.