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?

    Thread Starter 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

    This should help https://www.w3schools.com/browsers/browsers_display.asp

    Thread Starter Chris Thomas

    (@chrisstreetcreditscouk)

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

    Thread Starter Chris Thomas

    (@chrisstreetcreditscouk)

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

    <?php /* Template Name: New Template */ ?>
<html>
<body background="https://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

    body {
    background-size: 100%;
}

    https://www.w3schools.com/cssref/css3_pr_background-size.asp

    Thread Starter 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("https://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("https://www.iqbalabdullah.com/wp-content/uploads/2014/07/Background.jpg");

    Do this:

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

    Thread Starter 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”?

    Thread Starter 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("https://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.]

    Thread Starter 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?

    Thread Starter 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("https://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.]

    Thread Starter 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.