WordPress.org

Ready to get started?Download WordPress

Forums

The Bootstrap
[resolved] Dynamically change which header image is used based on screen size. (5 posts)

  1. graphics616
    Member
    Posted 5 months ago #

    Is there a way for me to dynamically change which header image is used based on screen size in The Bootstrap? I have looked for plugins to use but I do not see any that speak of that feature. I would like to be able to have a full size header image for desktop use and then have a different header image altogether when the screen size drops to phone sizes.

  2. graphics616
    Member
    Posted 5 months ago #

    No ideas whatsoever from anyone?

  3. graphics616
    Member
    Posted 2 months ago #

    I am not sure how to do this in Bootstrap so I have been taking time to figure out how to make this happen in with my own coding in the template files and with jquery. Lynda.com is a great resource for anyone out there who is needing answers to questions about web design and many other things as well. I used the course: "Creating a Responsive Web Experience with Chris Converse" from the Lynda.com library of courses to learn the answer to this question.

  4. anonymer
    Member
    Posted 2 months ago #

    Could you please post your code ? I try to achieve something similar on my page.

    Cheers,
    Pascal

  5. graphics616
    Member
    Posted 2 months ago #

    Hi Pascal.

    What the above course in Lynda.com and the previous course: "Creating a Responsive Web Design" show how to do is use a header structure similar to this:

    <link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
    		<link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
    		<link rel="stylesheet" type="text/css" media="only screen and (min-width: 50px) and (max-width: 500px)" href="css/screen_layout_small.css" />
    		<link rel="stylesheet" type="text/css" media="only screen and (min-width: 501px) and (max-width: 800px)" href="css/screen_layout_medium.css" />
            <!--[if lt IE 9]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->

    to call different .css files with differing content based on your browser resolution.

    Try to Google how to achieve that if you do not want to use the courses from Lynda.com. I am sure there are several free tutorials out there explaining these media calls. And there is probably a way to do this in a single css file as well but I am not to that point yet.

    Hope this helps.

Reply

You must log in to post.

About this Theme

About this Topic