Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS @media screen and (min-height: 768px)

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #36308
    kmattingly
    Member

    I’m trying to implement a media query that will only show a background image when a user is on a larger screen.

    I tried using this:

    @media screen and (min-width: 768px), screen and (min-height: 768px) {
    #bgImg img.myImage {visibility:visible;}
    }

    but it’s not working, the image still shows up when the browser window is less than 768px. I can’t find a good example of implementing a media query for both height and width at the same time. Any help would be greatly appreciated!

    #95400
    polson1000
    Participant

    I only have a blackberry so no sure it this works or not on a larger screen on hand held, but I have tested it and it displays an background img on my PC and not on my blackberry.

    #95401
    polson1000
    Participant
    #95409
    kmattingly
    Member

    Thanks polson1000 for your input. It’s still not working though :)

    Here’s a better peek at the (horribly written, I’m sure) code I’m working with:








    Title


    Text goes here.









    #95411
    TheDoc
    Member

    @kmattingly – please wrap your code in < pre> and < code> tags. You can find the button right beside the ‘italicize’ button when you are writing your post. I’ve fixed the one above for you.

    #95415
    polson1000
    Participant

    EPC London Live Site Example

    Hi I have just made an example on of my live sites. I cannot make such a dramatic change such as a background image as it is live. However if you look at the footer you will notice that the image is removed on handhelds (min-width: 768px) and (min-height: 768px). http://www.commercial-london-epc.co.uk/epc-london.html.

    .twoColFixRtHdr #footer{ width:960px; height:60px; background-image:url(images/footerimage.jpg); background-repeat:no-repeat; padding:10px 0px}
    @media only all and (min-width: 768px) and (min-height: 768px) {
    .twoColFixRtHdr #footer{
    background-image:none;
    background-color:#333;
    }
    }

    Was the code that this was done with in your code I notice that there is no call to background-image:url(IMAGE_URL_HERE); in your style sheet. Can you place the site online so I can have a look?

    #95420
    kmattingly
    Member

    @polson1000 – here is a link: Test

    I’m not actually using a background-image because I wanted the image to scale to 75% of the width of the page – I didn’t think I could do that with it set as a background image.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.