Dynamically change which header image is used based on screen size.

  • Resolved graphics616

    (@graphics616)


    11 years, 1 month 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter graphics616

    (@graphics616)

    No ideas whatsoever from anyone?

    Thread Starter graphics616

    (@graphics616)

    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.

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

    Cheers,
    Pascal

    Thread Starter graphics616

    (@graphics616)

    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="https://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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dynamically change which header image is used based on screen size.’ is closed to new replies.