hello i have a problem with using my background graphics.
the structure of the site is the following:
header contains two colors with a fixed height of 100px.
mainframe should contain a sliced image with a variable height.
footer contains one color and has also a fixed height of 100px.
so my sliced image has a height of 550px and will fit exactly between header and footer in case the content would not be larger.
<html>
<body>
<div class="wrapper">
<div id="header">header</div>
<div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>
<div class="push"></div><!--Push for sticky footer-->
</div><!--Wrapper -->
<div class="footer">footer</div>
</body>
example
now the problem is, that my content will be larger than 550px and because of a fading colour there will be a hard edgde and you can see where the image ends. so i thought it would be nice when that sliced background image could automatically be resized.
is there a way to realize that by using css?
thanks alot.
Short answer: unfortunately, there isn't a way to resize background images with CSS.
Often, there's a clever workaround using the background-repeat:repeat-x; or background-repeat:repeat-y; properties, and using a carefully sliced background image.
If you have an example of the image, I may be able to help more.
Try
background-size: 100% Auto;
You could try
background-size:cover;
Related
I have a page with a huge background which is fixed - as in:
body {
background: url(...) no-repeat center center fixed;
}
Now, to remove some focus from the background image, I thought about simply blurring it at the moment the real content starts. Think about a transparent jumbotron, followed by one giant div containing all the content. An example markup:
<div id="navigation">
<nav>...</nav>
</div>
<div id="page">
<div class="transparent-jumbotron">
Big intro to the site goes here
</div>
<div class="content">
The actual content goes here
</div>
</div>
<div id="footer">...</div>
I have been trying out various hints and tricks on the internet - but the most I got was that #page.contents had the site's background - but upon scrolling a bit, it turned out that there was one instance of the background covering the original, and then there was the normal, unblurred background. This contents div also has a semi-transparent background applied through rgba() to darken the background.
So my question is: How can I blur the larger portion of a site, which has a fixed background image but much content that will require scrolling (as in, dynamicaly applying the blur filter)?
You should use opacity property in css
opacity : <A number between 0 and 1, e.g:0.5 1 is fully focused and 0 makes the elmend hidden >;
I need to create a row for a front page (like a slider) with an image where there is a man and behind him is a gradient.
the image is as it is, centered in container (width 1170px) and that works fine but i need to make a row behind the image to go full 100% for larger resolutions. I am using bootstrap 3.
The way I see it, the background 'row' div should have a dark color from left to center, and from center white color should go to the right.
I dont believe a gradient on row should work because of the resizing hm?
I cant find any similar websites that have this.
Is there a better solution?
<div class="row">
<div class="col-md-12">
<div class="container" id="slider">
</div>
</div>
</div>
#slider {
background: url('image.jpg');
height: 550px;
}
For this kind of Design normally we remove left portion if it's not necessary. Otherwise we need to make display block both div left and right.
I'm using Twitter's Bootstrap fluid layout. This is a snippet of my code
<div class="hero-unit" style="background-image:url('images/ball on sand.JPG'); background-size:100%;">
<h1>Pelican Volleyball</h1>
<p>The northshore's premiere outdoor volleyball organization</p>
<p>Learn more ยป</p>
</div>
If I make my window too narrow, the image "ball on sand" will repeat. I just want the height of my image to stretch to fit entirely in the hero-unit div. How do I do this?
Try background-repeat: no-repeat and background-size: cover
You can try background-size:cover
From MDN
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
i have a small html page in the following format
<html>
<head></head>
<body>
<div id="wrapper">
<table></table>
</div>
</body>
</html>
the problem I am having is that its not showing everything.. it scrolls down up to a point.. the background of it is a photoshop .png image and on top of that background i created the table within the div..
Everything else is in place and show appropiately, its just the end of the page is not showing.. doesnt scroll down completely.
The background at the end has a "Designed by [name]" but it is not showing this part.. it scrolls down up to just before this part of the png picture..
Any ideas what I could be missing?
Based on the limited information you provided, my guess is that the height of your page's content is not long enough to justify showing that part of the background. The page only scrolls to the length of the content, not the length of the background.
Fix the height of your wrapper div by making its min-height equal to the height of your image. Assuming your image is 500px in height, you CSS would be the following:
<style type="text/css">
#wrapper {
min-height: 500px;
}
</style>
I have an image on the top page that's 960x200px wide. It's in a div tag. What happens is when I scale the page by pressing ctrl+scrolling, the image scales out of the page, off the screen, and gets cropped off. How can I make it that when I scale the page, like amazon.com or other websites, the page doesn't become cropped and instead, I get an horizontal scroll bar at bottom of the browser?
/* css */
#header { background-image: url('image.gif'); }
<!-- html -->
<div id="header"></div>
This is happening because your image is a background-image.
Therefore the width of the image is not being calculated as part of the width of the page.
If you want this not to happen, make your div#header explicitly 960px wide.
You need to make the header image part of the HTML code like this.
<div id="header">
<img src="image.gif" width="960" height="200" />
</div>