A site I'm working on doesn't appear to show certain graphics. For example using IE and firefox my site appears fine, however using Safari I get nothing but a blue background, the site in question is:
http://www.huntspillfederation.co.uk/
Doing it for a school and my web design skills are that great (as you can tell!)
I guess its the CSS thats the problem, in which case the error is somewhere in this code:
<style type="text/css">
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -100; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
}
.stretchw {
width:100%;
}
#cloud1 {
position: absolute;
left: 50px;
top: 50px;
z-index:-99;
}
#cloud2 {
position: absolute;
right: 50px;
top: 50px;
z-index:-98;
}
.bottom {
background-image: url("images/hill3.png");
background-position: left bottom;
background-repeat: repeat-x;
position:absolute;
bottom:0px;
left:0px;
width: 100%;
height: 263px;
border: none;
overflow-x: hidden;
z-index:-97;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #666;
}
h1 {
color: #000;
font-size: 35px;
font-family:Palatino Linotype;
font-style:italic;
}
</style>
Any help much appreciated!
:)
It looks like your negative z-index's are the cause of the problem. Start at 0 and go higher for the elements that you want to appear in front of the background.
You don't need to use the container_bg1.jpg image in your background div. To your body tag, add:
background-color: #67b8ed;
Then remove the background div and image. You no longer need them at that point, and it's one less div and image to potentially conflict with everything else displayed on the page.
Don't apply a dynamic height and width to your images. I see the clouds stretching based on the height of the window.
Images are appearing just fine to me in Safari, Chrome, IE and Firefox.
Related
I'm trying to create a page in which the background image covers it without repeating or expanding beyond the window. It is now cut off at the bottom.
I have tried using viewport sizes, percentages, and cover, but it either repeats or gets cut off and leaves almost half of the window totally white.
html, body {
margin:0;
padding:0;
width:100%;
height:99vmin;
overflow:hidden;
}
body {
font-family:verdana, arial, sans-serif;
font-size:76%;
}
#background {
position:absolute;
z-index:1;
width:100%;
height:100%;
background-image: url(https://i.imgur.com/OON2Kz3.jpg);
background-size: cover;
}
#quotes {
text-decoration: none;
padding-top: 30%;
padding-right: 20%;
padding-left: 20%;
margin: auto;
position: absolute;
text-align: center;
color: beige;
font-size: 36px;
}
.button {
position: absolute;
z-index: 1000;
margin: 50%;
text-align: center;
}
<body>
<div id="background">
<div id="quotes">
<p>“Art is the supreme task and the truly metaphysical activity in this life.”</p>
<p>“Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.”</p>
<p>“We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.”</p>
</div>
</div>
<button class="button">Thus Spoke Nietzsche</button>
<script src="randomize.js"></script>
</body>
try this with img
#background{
position:absolute;
z-index:1;
width:100%;
height:100%;
}
<body>
<img id="background" src="https://i.imgur.com/OON2Kz3.jpg" alt="" title="">
</body>
If you want full image as background try - background-size: 100% 100%; or background-size: 100%;
I'd like to had a specific design to a webpage i'm designing.
The main wrapper contains a succession of <div class='section'> and <div class='section-header'>. The section-header should display the section's title over an image.
exemple:
<div id="tag" class="section-header">
<h1>Title</h1>
<img src="assets/img/some_image.jpg">
</div>
So far my css is:
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
}
.section-header > *
{
width: 100%;
line-height: 192px;
margin: 0;
}
.section-header > h1
{
position: absolute;
z-index: 10000;
text-align: center;
}
.section-header > img
{
filter: opacity(50%);
}
however i'd like to add some relative movement between the background image and the section-header. I basically wanted to fixe the image to the screen with position: fixed; and let the overflow: none; do the job.
However it appears that as soon as I add position: fixed; top: 0; to .section-header > img, the overflow isn't hidden anymore and the image is visible regardless of the position of the header it's nested in.
How can I solve that ?
Edit:
devel code is visible here. I'd basically have the image behind each section's title not to scrool with the page, and just to have the section's header reveal it as you scrool
If I understand the effect you want, you may need to use the img as background; try this:
body{
background: #f3f3f3;
height:800px;
}
div {
text-align:center;
color:white;
width:80%;
margin:150px auto;
line-height:200px;
background:url('http://lorempixel.com/600/600') no-repeat center;
background-attachment: fixed;
}
div h1 {
font-size:3em;
}
<div>
<h1>Mytitle</h1>
</div>
Jsfiddle Demo
Overflow is ignored for position:absolute children in parent that is relatively positioned.
One way of fixing the problem is giving .section-header a position:absolute or position:fixed too. (whichever is most useful for you).
like this :
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
position: absolute;
}
see this jsfiddle
I got this weird problem with a parallax footer I created. Take a look at this jsfiddle. I used the parallax footer in a design for a client. The jsfiddle is a simpler version of the code I'm using in the project.
The footer works fine in all browsers, even IE, but for some reason it refuses to work in Safari. So I found the problem:
body,html {
margin:0;
width: 100%;
height: 100%;
}
Setting the height of html to 100% results in Safari not scrolling further after the last section, and thus not showing the footer. It looks like the margin I set on the section before the footer is completely ignored.
Does anyone know how to solve this problem?
Update: edited jsfiddle
You dont need to set the footer to position: fixed set the background attachment on the image to fixed instead. It creates the same effect:
footer {
padding-top: 50px;
background: url(..imagepath..) fixed; //can change to just 'background' and add `fixed`
color: white;
width: 100%;
height: 200px;
bottom: 0;
text-align: center;
overflow: hidden;
/*position: fixed;*/ //remove
/*bottom: 0;*/ //remove
/*z-index: -1;*/ //remove
}
FIDDLE
UPDATE
I think the best solution is to add an empty div with no background color as a spacer. Since you have a fixed amount for the bottom margin you can use that as a height instead:
HTML
<section>
<h1>Scroll down</h1>
</section>
<div class="spacer"></div> <!--add-->
<footer>
....
CSS
footer {
padding-top: 50px;
background-color: #181818;
color: white;
width: 100%;
height: 200px;
position: fixed;
bottom: 0;
z-index: -1;
text-align: center;
overflow: hidden;
/*margin-bottom: 250px;*/ //remove
}
.spacer{
height: 250px;
}
NEW FIDDLE
I am stuck in making images inside background of a class responsive.The website url .
It would be very helpful if you could help me out i am using bootstrap and nivo slider.
The css and the html that i am using for the slider are given below.
The css:
.slider-wrapper {
width: 310px;
height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
width:290px;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height: 100%
}
The html:
<div class="slider-wrapper ">
<div id="slider" class="nivoSlider">
<img src="" />
<img src="" />
</div>
</div>
And a screenshot of the above code (with additional html ) on a laptop:
Here is the website url. Try viewing it below 380px width as that's when the problem occurs.
I want the image to be visible properly at less than 380px.
I want the all the images to become smaller and be in the center and properly aligned below 380px but i get this:
.
I would be more than thankful if you could help me out
It's a little hard to debug without seeing the whole picture, but I think you need to be using max-widths like the code below. This will prevent your divs/images from becoming larger than you want, but will allow them to be smaller if necessary.
.slider-wrapper {
max-width: 310px;
max-height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
max-width:290px;
max-height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width:100%;
height: auto;
}
Absolute positioned elements need to be put in a floated container to move responsively. The mobile content will move in sync with the screen shell if you put the absolute container into a floated one. I ran into this exact same problem on one of my projects - it's a surprisingly easy solution.
Pen:
http://codepen.io/staypuftman/pen/tFhkz
Note the pink absolute positioned element moves as you resize the screen while staying inline with the blue box. The whole blue box with the pink absolutely positioned element inside will float together as unit to any width.
HTML:
<div class="hero-background">
<div class="hero-text-area-container">
<h3 class="hero-text-effects">Eaters: Find Your Favorite Food Truck</h3>
</div>
<div class="iphone-backdrop">
<div class="hero-image-band-container"></div>
</div>
</div>
CSS (background colors are to show elements):
.hero-background {
background: #dedede;
height: 100%;
margin-top: 4em;
min-height: 20em;
min-width: 100%;
}
.hero-text-area-container {
background: #d6ffd1;
float: left;
margin: 0% 6%;
max-height: 25em;
padding-top: 11em;
position: relative;
vertical-align: middle;
width: 55%;
}
.hero-background .hero-text-area-container h3 {
background: #f7f7f2;
opacity: .8;
padding: 1em;
text-align: center;
}
.iphone-backdrop {
background: #d1e2ff;
float: left;
height: 120px;
max-width: 320px;
padding-top: 2em;
position: relative;
width: 100px;
}
.hero-image-band-container {
background: #ffd1d1;
height: 80px;
position: absolute;
width: 80px;
top: 13%;
left: 0;
bottom: 0;
right: 0;
}
Change the css in nivo-slider.css from:
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%
}
To
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
/* now this is the important things for your problem */
vertical-align: baseline !important;
max-width: none !important;
}
i found the answer.It was posted to me by a user.So I'm sharing it if anyone else gets into any trouble:
"So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from)."
Try this:
#media(max-width: 380px) {
.nivoSlider{
position:relative;
width:94%;
height:378px;
top:85px;
bottom:0px;
left:8px;
overflow: hidden;
}
If you look at this fiddle: http://jsfiddle.net/bastien/PybrF/1/
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
}
#content {
top: 51px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
background-color: orange;
}
If you resize the window then the vertical scrollbar gets visible in the content div. BUT it gets only visible (so it seems for me...) when I have exceeded the height in pixel of the header while resizing the window.
How can I get the vertical scrollbar correctly?
UPDATE
I want a header which stays fixed.
I want a content which has inside scrollbars.
something like this: http://jsfiddle.net/bastien/PybrF/7/
but the vertical scrollbars should start inside the content div and not start at the header/body.
Try this in your css:
* { margin: 0; padding: 0 }
#header, #content { width: 100%; position: absolute; }
#header {
height: 50px;
background-color: yellow;
}
#content {
top: 50px;
height: 70%;
overflow-y: auto;
background-color: orange;
}
Will produce this:
As for the height of the content to use all the space left, I would to a js function wired to the resize event to set the height of the content to the page height minus the height of the header. I honestly don't know another solution for this.
Due to your use of fixed positioning and application of overflow settings, only the #content area will scroll.
Consider this:
1) Add the orange background color to the body element and remove its margins:
body {
margin:0px;
padding:0px;
background-color: orange;
overflow-x: hidden;
overflow-y: auto;
}
2) Position the other elements relatively:
#header {
position: relative;
height: 50px;
background-color: yellow;
}
#container {
position:relative;
}
http://jsfiddle.net/PybrF/6/
EDIT:
I'm still unclear on what you're looking for, but here's another method.
This one keeps the header fixed and puts the scrollbar inside the #content area.
body {
background-color: orange;
margin:0px;
}
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
z-index:1; /* keep the header on top of the content */
}
#content {
position:relative;
padding-top:50px; /* height of the header */
}
http://jsfiddle.net/PybrF/8/
ok I knew it must work:
Still found some old similar code and refactored it:
have fun! :)
Sorry for telling crap.
Remove the width/height percentage settings and use the left/right/bottom etc settings. Thats enough.
Forget about the main div which was from this other project long ago.
http://jsfiddle.net/bastien/PybrF/12/