I have problems with my website. There is displayed only one (first) image on website even if futher images will be this same (I mean this same src, just like to first one).
Website has section with image background.
Code:
#kafelobrazintro {
background: url(../images/introtablet.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
This is section with working img but even if I copy this css to another section, website will still display only one img.
Images on website are lower than 2 MPX, resolution: 1024 x 614 px, size less than 100kb.
If u have iPad check my website and get know what Im talking about :> Website display only first img :?
Why its not working?
Adress: http://www.badzlepszy.pl/Nebiolo/
The problem is with the background-attachment: fixed;. If you remove fixed the background images work.
Use media queries to change this property at the appropriate window sizes.
Still didnt solve the problem. First image on iPad displays, but futher ones dont.
If u have iPad u can check at: website
I created tableb.css just for iPads:
<link media="only screen and (device-width: 768px)" href="css/tablet.css" type= "text/css" rel="stylesheet" />
CSS for img section in tablets:
#kafelobrazintro {
background: url(../images/introtablet.jpg) 50% 0 no-repeat;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
#kafelobraz1 {
background: url(../images/logomzblue.jpg) 50% 0 no-repeat;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
Same problem was here with a little bit of difference. My div-s with background images were empty ( no text and no html content )
The solution here was adding: min-width: 1024; to these div-s.
( I tested your site with iPad Air and iPad 4th on http://www.browserstack.com/ and looks good )
Related
When user's device width is more than 480px I'll show him original GIF as a background of my site.
My HTML:
<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">
My CSS:
.background {
display: block;
height: 100%;
margin: 0 auto;
}
When user's device width is less than 480px I increased my GIF's width to 200%, because without increasing the smoke looks very commpessed and skinny:
So, I do this in my CSS:
#media screen and (max-width: $breakpoint) {
.background {
position: absolute;
left: -50%;
max-width: 200%;
}
}
And here is a problem. As my GIF is increased in 2 times, I get horizontal scrollbar. Just look:
I really need to increase GIF, so that the smoke looks more widely. How can I remove empty place on the right side, which was created by GIF? Or maybe there is some other way to increase GIF's width? I tried to use overflow in the different ways. Also I tried to set body width 100% of device screen.
Add this to your CSS, referring to the element you need (it should be the entire html or body like in this example, if this is your entire site background, btw):
html, body {
overflow-x: hidden;
}
Add background-attachment:fixed; in your style
code exact :
.background {
display: block;
background-attachment:fixed;
height: 100%;
margin: 0 auto;
}
You should try using background center with optional scaling percentages.
The full edit is here https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI
.bg{
width: 100%;
height: 100%;
background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif");
background-size: cover;
}
and ofcourse just drop a div
<div class="bg"></div>
So im using the foundation frameworks for my wordpress build. I cant seem to figure out why im getting this weird margin or padding on the right side when i drop down to tablet or mobile view.
Anyone ever seen this or know of a fix?
Heres my dev site. if you size the browser down to tablet or phone size and scroll to the left or right it will show up.
I'm using Chrome
body {
background: url(../img/dark-grungewall.jpg) repeat;
height: auto;
}
.site-container {
background: #fff;
box-shadow: 0.5px 0.866px 63px 0px rgba(0, 0, 0, 0.83);
width: 100%;
margin: 0 auto;
}
.row {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
I wanna say the error is coming from my containing divs or body but im not really sure.
http://dev.solarinnovations.com/
This happened to me in the past when using the .row class from Bootstrap. Try putting overflow:hidden in the style part of the wrapper/container class and see if it fixes the issue.
In this part of your code, you set a max-width. This max-width is stopping the site from stretching across the entire window.
.row {
margin: 0 auto;
max-width: 87.5em;
width: 100%;
}
You can fix it by easily using:
max-width:100%;
I have a series of 'slides' on my website that work fine on a 1080p monitor, but do not scale at all on a phone/tablet. I've already tried a few different methods, not of which have worked.
http://pelicancottage.com.au has the images as they currently are, and here is the css for one of the 'slides'
#slide1{
background:url('../img/slide2.png') 50% 0 no-repeat fixed;
color: #fff;
height: 800px;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}
Have you tried using the css media queries? This allows you to customize your layout depending on your screen-size as well as your device (an explanation of this is here-> http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries).
try this
but for a phone you better change background. Can't go from 16:9 to whatever a phone uses.
#slide1 {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Hi i working on this site http://sealonline.playrohan.com/main.html#&slider1=3
it seemed fine in the web browser but in mobile it looks different.
problem 1.
footer's background images repeat-x is not working.
div.load {height:12px; width:100%; background:url('/image/seal_common/footer_pt.gif') 0 0 repeat-x;}
problem2.
images is cut it out.
the villige image is more wide but is not showing.
div.villige {height: 124px; width:100%; text-align:center; background:url('/image/seal_common/bg_footer.png') 0 0 no-repeat bottom; display: block;}
problem 3.
middle section is not in the middle.
i already put this.
<meta name="viewport" content="width=device-width">
but it still doesn't work.
This is first web site using html 5.
can you try replacing your body css property margin: 0; to margin: 0 auto; first? then add some other styles to your body tag:
position: relative;
width: 100%;
max-width: <the max width of your background image>;
let me know what happens next.
I am having issues making the sprite I have resize, when I resize browser window.
The remiander of the template is repnsive including the Nav Menu.
The sprite remains fixed and sticks out of the page when resizing.
How would I make it size like the rest of the template (removing the width scroll bars)
If you just remove the sprite everything displays correctly.
I have created a Fiddle but its not showing the when I click results.
I have uploaded the page to here:
Test Page
Thank you.
Perfect Solution I have Got U can Use
I have used This solution
And It works Fine on all browser except Android Browser
.playerSp
{
display: block;
background: url(blue_sprite.png) no-repeat;
}
.next-button
{
background-position: -83px -6px;
width: 41px;
height: 46px;
}
var abc=(screen.availHeight+screen.availWidth);
$( window ).resize(function() {
var aaa=($(document).height()+$(document).width());
scale=abc/aaa;
$('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
});
</script>
So I was stuck with the same question and noticed the answer was not yet given here.
Here is the answer:
I've managed to make my sprite fully responsive. For this I didn't use any slicing (photoshop) or javascript. Also notice how the sprites are positioned absolute and yet still responsive according the background.
For a better understanding of this process, please see the following link: http://brianjohnsondesign.com/unlisted/demos/responsivesprite/
Also see my link in order to see how it looks on my website: http://demo.chilipress.com/epic3/
Should my link not work anymore, try the first link above.
See here the CSS and HTML
#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
HTML
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
your sprites have fixed height: 632px; & width: 1163px; if you want them to resize youshould add at least a min-width and a min-heigth properties
example, if you want your sprites resize to a minimum of 10 px lets say you would add those properties to your code
#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}
you can also use media queries to change the image acording to screen width or height: example:
#media screen and (max-width: 980px) {
#sprite-main-v2 {
height: 100 px; /*new size*/
width: 100 px; /*new size, value just as example*/
background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
}
}
Shrink your sprite to a smaller set size by adjusting its background-position and background-size css properties in a media query.
background-position: 0 -135px;
background-size: 170px 190px;
Those number are an example, you have to play with them to get it to line up with your sprite, which can be confusing as the image can disappear. Recommend adjusting them bit by bit in developer tools.
You can also use percentages to allow for a more responsive resizing, although this can get tricky too.
Note, background-size doesn't work on IE8 but neither do media queries....