Support » Themes and Templates » Background image size for twenty fourteen theme

Viewing 15 replies - 1 through 15 (of 18 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Are you trying to judge how big people’s screen sizes will be?

    Chris Thomas

    (@chrisstreetcreditscouk)

    Hi Andrew, thank you for your reply.

    No I am just trying to get an image designed in photoshop with details at the bottom and I don’t know what size to create the image in photoshop?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Chris Thomas

    (@chrisstreetcreditscouk)

    thank you for this but what code would I add to make the image I display responsive?

    Chris Thomas

    (@chrisstreetcreditscouk)

    I have created a template in fresh html with the following code:

    <?php /* Template Name: New Template */ ?>
    <html>
    <body background="http://www.iqbalabdullah.com/wp-content/uploads/2014/07/Background.jpg">
    </body>
    </html>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum’s parser.]

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Chris Thomas

    (@chrisstreetcreditscouk)

    I have added this code but still cannot get the background size to sit on the page properly: please click here to see

    <?php /* Template Name: New Template */ ?>
    <html>
    <head>
    <style>
    body {
        background-size: 100%;
        background-repeat; no repeat;
        background: url("http://www.iqbalabdullah.com/wp-content/uploads/2014/07/Background.jpg");
    }
    </style>
    </head>
    </html>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum’s parser.]

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Instead of this:

    background: url("http://www.iqbalabdullah.com/wp-content/uploads/2014/07/Background.jpg");

    Do this:

    background-image: url("http://www.iqbalabdullah.com/wp-content/uploads/2014/07/Background.jpg");

    Chris Thomas

    (@chrisstreetcreditscouk)

    This has worked better but I am still uncertain as to what size to create the image in photoshop since it is still not right.

    The current image size is 1920 x 1080px but the logo at the bottom still doesn’t reach the end of the page.

    I am trying to replicate a footer with the image.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Maybe you need to use “contain” instead of “100%” on your background size

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Or “cover”?

    Chris Thomas

    (@chrisstreetcreditscouk)

    I have done this but no luck:

    <?php /* Template Name: Iqbal Abdullah */ ?>
    <html>
    <head>
    <style>
    body {
        background-size: contain;
        background-repeat; no repeat;
        background-image: url("http://www.iqbalabdullah.com/wp-content/uploads/2014/07/Background.jpg");
    }
    </style>
    </head>
    </html>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum’s parser.]

    Chris Thomas

    (@chrisstreetcreditscouk)

    Thank you! Cover has worked! Do you think I should downsize the image size and go again with a revised image?

    Also, with the code above, should I add any further elements?

    Chris Thomas

    (@chrisstreetcreditscouk)

    I have lost my social media signs having used the cover code:

    <?php /* Template Name: Iqbal Abdullah */ ?>
    <html>
    <head>
    <style>
    body {
        background-size: cover;
        background-repeat; no repeat;
        background-image: url("http://www.iqbalabdullah.com/wp-content/uploads/2014/07/Background.jpg");
    }
    </style>
    </head>
    </html>
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53b598c451fb3ef2"></script>
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53b598c451fb3ef2"></script>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum’s parser.]

    Chris Thomas

    (@chrisstreetcreditscouk)

    sorry my mistake I haven’t lost them 😉

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Background image size for twenty fourteen theme’ is closed to new replies.