I have a background image that re sizes with the window. I want the words on my background image to represent links. My idea was to create divs that were empty and transparent and position them over the words in the background image and when that div was clicked, the corresponding link would be activated.
I am having trouble positioning my divs. I can't seem to get them to stay aligned with their word in the background image when the window is re resized.
HTML:
<div id="wrapper">
<div id="bespoke">
I want this to always be aligned with "Bespoke" in the background image
</div>
</div>
CSS:
html {
background: url(main.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
}
#wrapper {
position: relative;
top: auto;
margin: auto;
text-align: center;
height: auto;
}
#bespoke {
}
Demo:
http://jsfiddle.net/DzC3V/1/
Note: if jQuery is the best way to accomplish this, I don't mind using it.
In my opinion you won't need jquery. CSS and positioning with percentages should do the trick.
Try the following
#yourObeject {
position: absolute;
top: 30%;
left: 30%;
}
it's tricky to position your div properly. but it should work
if this doesn't fit your needs you should really try doing an image Map and resize it with jquery
i think the best way to do this is to use media queries, its a bit of a drag, but it will work
You can set the image in a div
And you can put the empty div on top of it using the z-index:1
So u have better control on both
Related
There are two columns (second one is separated with other two columns ). I need to setup backgrounds to each of them, but the text still need to follow the side page alingment. I'm using Bootstrap. http://www.screencast.com/t/0YxmYlE76
Are you looking to replicate the screenshot provided with your question? If so in order to set a background image to each column you will need:
.div {
background-image:url(/path/to/image);
background-repeat: no-repeat;
background-position: center top;
background-size: cover; //this will ensure the background image always covers the width of the div
height: 500px; //change this to whatever height you want to set
text-align:left; //to align text to the left of the div
}
The above is one way of writing the CSS, you could use shorthand for the background image styles like below which is a less long winded way of writing the styles in your stylesheet:
.div {
background: url(/path/to/image) no-repeat center top;
background-position: cover;
height: 500px;
text-align:left;
}
Also note if you are building a responsive site, you can change the height for the div across different breakpoints.
If you want to achieve the layout in your screen shot using bootstrap, you can use something like this:
https://jsfiddle.net/rejw439u/
HTML layout would look like this.
<div class="row">
<div class="col-xs-8"><h1>The Contingent Workforce</h1></div>
<div class="col-xs-4">
<div class="col-xs-12"><h2>Heading 2 Article</h2></div>
<div class="col-xs-12"><h2>Heading 2 Article</h2></div>
</div>
</div>
you can then add classes like my fiddle link to add background styling etc.
Thanks for the help, I fixed the problem.
.col-sm-8 {
height: 600px
}
.col-sm-8:after {
content: " ";
position: absolute;
width: 66vw;
height: 100%;
bottom: 0;
right: 0;
background-image: url("image.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
I have been looking at this css demo (http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/) , and love it : however, I want to be able to put this into a div, and not cover the whole page.
Is this possible ? I have been able to put single image into a div using this css code
header {
background: url(/assets/images/landscape-mountains-nature-man.jpg) no-repeat center top fixed;
-webkit-background-size: contain;
background-size: contain;
}
but for the life of me I can't get the image slideshow to work in a div
I am not a css guy (as it is plainly obvious) and would appreciate some pointers if someone could help me out ;)
Thanks!
========= update ========
I probably have not been clear enough : I have been able to get a div background working , but what I really want to do is to use the css animations in the slideshow demo in a div.
I have implemented the css from the demo, but it is fullscreen, and I can't work out how to limit it to a div / class , despite working on it for quite some time.
What I don't get is that the css from the demo is
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
and my html is
<header id="home">
.. [snip] ..
<div class="container">
<ul class="cb-slideshow">
<li><span></span><div><h3>page1</h3></div></li>
<li><span></span><div><h3>page2</h3></div></li>
<li><span></span><div><h3>page3</h3></div></li>
<li><span></span><div><h3>page4</h3></div></li>
<li><span></span><div><h3>page5</h3></div></li>
<li><span></span><div><h3>page6</h3></div></li>
</ul>
so why does the css in my code just limit itself to the header, but the css in the animation take over the whole page ?
You can use this
HTML
<div class="header_div">
</div>
CSS
.header_div {
width: 100%;
height: 400px;
background-image: url('http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg');
background-size: cover;
background-position: center;
}
Just make multiple div in the HTML, like so:
<div id = "number1"></div>
<div id = "number2"></div>
<div id = "number3"></div>
then, in the CSS, put:
#number2 {
background: url(/assets/images/landscape-mountains-nature-man.jpg) no-repeat center top fixed;
-webkit-background-size: contain;
background-size: contain;
}
this #number2 can be number 1 or 3, just put content in the other div's
hope I helped!
I recommend that if you're using a div, using jquery to specify to the height of the screen, this will serve to assign the height of the screen and will also work with mobile phones and tablets.
This method is for use with <body>:
Css:
body {
background: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg') no-repeat fixed;
background-size: cover;
background-position: center;
}
Or you can use it in a div adding Jquery like this:
$(function() {
var height = $(window).height()+"px",
$element = $('.background-image');
$element.css('height', height);
});
this is to make your div is full screen.
I'm building the following website for a client based on a WP premium theme. As you can see, I'm trying to set it so that images can be applied full-screen.
http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/about/
The problem I'm having is that I am now getting a horizontal scrollbar showing up when the image is there.
I've already set the image position to absolute so I would have thought this would prevent any scrollbar issues. Is there something I'm doing wrong?
Add this rule to your body
body {
overflow-x: hidden
}
First off, you should not load your background as img. Load it using background-image attribute on some fixed positioned element. This way, when the image is not available, you won't have an ugly browser placeholder saying [image-not-found].
Secondly, whenever you have an element set to width 100% and add a padding to it, it is going to overflow on the x axis. If you don't want that, set the overflow-x to hidden on it's parent, as #abforce suggested.
The best way to add a full background image is to add it as a background to a fixed positioned div which is a direct descendant of the body element.
Here's an example:
<body>
<div class="full-background"></div>
<!-- Here goes your content... -->
</body>
CSS:
.full-background {
position: fixed;
background-image: url('link-to-your-image');
background-size: cover;
top: 0;
width: 100%;
height: 100%;
}
You might want to set the image as a background-image with CSS instead of an IMG element.
#content-wrapper {
background-image: url('http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/wp-content/uploads/2015/01/iStock_000008484482Medium.jpg');
}
You can set it as background image:
.background-photo{
background: url('url_to_image') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can use the image as background in the body tag width background-size set to cover instead so the image will fit your page
I've created a parallax scrolling effect using only CSS. However I'm struggling to understand why it's actually working. Can someone help explain.
HTML
<div class="image"></div>
<section class="content">
<p>TEXT GOES HERE</p>
</section>
CSS
.image {
background: url('http://s28.postimg.org/v6mfcxbyl/galaxy.jpg') no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 500px;
}
.content {
width: 100%;
max-width: 750px;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
z-index: 2;
background: #FFF;
width: 100%;
}
It looks like it has something to do with setting the background fixed on the image div.
Here's a working fiddle http://jsfiddle.net/pAjNr/
position:fixed and background-attachment:fixed mean that the element will not move in relation to the viewport. So however much you scroll, the title (position:fixed) and the background image (background-attachment:fixed) will not move. The thing that does move is the text (.content) which doesn't have position:fixed.
When the text crosses over the title, it has a higher z-index (and position:relative so the z-index is not ignored) so it hides whatever is underneath it (the title).
Statically fixed or relatively (according to document) position of the background image will create the background effect.
The title is positioned fixed with a z-index lower then the content this being covered by it on scroll.
The content below is just normal and on scroll it just covers all the fixed elements with lower z-index.
Setting the background to fixed will fix the background-image relative to the viewport, even when the element itself scrolls (see here with added border: Example 1 ).
You could as well position the .image element itself with position:fixed and add an offset for the .content element: Example 2 to achieve exactly the same effect.
I have an image that is my header. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
It fills the full width of the page, but I had to specify a height for it show up. Here is the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 250px;
}
How do I make this image responsive? Right now when I expand the page it gets to the point where the pic is unrecognizable.
Didn't got your question quiet well, but I think you are missing a value here
background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */
--^---
CSS
.wrapper {
background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Demo
As ralph.m suggested, if you are using this image as your website background, than use the background property on body element instead of div
You need to use following CSS to make the background responsive
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Reference Link
You need to think carefully about how you want/expect this to work. Without some actual content in the div, it will have zero height, which is why you needed to set a height on it; but in general, try to avoid setting heights. Presumably, if this is a "wrapper", it will be wrapping some content that will hold it open without you having to set a height.
As for the background image, you need to think about how it will behave. Do you just want it to appear in a strip along the top? If you use Mr Alien's solution, be aware that the image will stretch wider and wider and start to look odd. So we need some more information on what you are trying to do here.