Support » Theme: Twenty Fourteen » Full size image on the 404

  • Hi everybody
    I am trying to set a funky full size image as background of the 404 page in my twentyfourteen-child theme so i put this in style.css:

    .error404 .page-content {
      margin:0;
      padding:0;
      background: url(images/BlnkLight.jpg) no-repeat center fixed;
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover; /* version standardisée */
    }

    but it doesn’t work even if the path to mydomain.org/wp-content/themes/twentyfourteen-child/images/BlnkLight.jpg brings me straight to the funky image…
    Does anybody have any idea why it doesn’t work?
    Many thanks in advance for your help

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi @tche111,

    The code should work fine but it will only display background image arounf the text content “It looks like nothing was found at this location. Maybe try a search?”.

    To make the image display in the whole background of the 404 page try using the following CSS code.

    .error404 #main {
      margin:0;
      padding:0;
      background: url(./images/BlnkLight.png) no-repeat center fixed;
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover; /* version standardisée */
    }

    If the above code also doesn’t work for you then please share us your site URL so we can troubleshoot it.

    Kind Regards,
    WPMU DEV

    Hi and many thanks for the answer!
    Actually I managed to make it appear by creating a new class and by adding the position (relative) and a min-height as per following:
    Style.css:

    main-404 {
      margin:0;
      padding:400px 600px 50px 50px;
      background: url("mysuperwebsite/.../images/BlnkLight.jpg") no-repeat center fixed;
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover; /* version standardisée */
      height: 1300px;
      position: relative;
    }

    404.php

    <?php
    /**
     * The template for displaying 404 pages (Not Found)
     *
     * @package WordPress
     * @subpackage Twenty_Fourteen
     * @since Twenty Fourteen 1.0
     */
    
    get_header(); ?>
    <div id="main-404">
    				<span class="emphase_hugewhite">404</br></span>
    <span class="emphase_mediumwhite">Ça n'a pas marché cette fois</br> mais vous pouvez réessayer!!!</span>
    
    				<?php get_search_form(); ?>
    </div>
    <?php get_footer(); ?>

    What do you think of this? Should I adapt it or can we set the topic as solved?
    Sincerely,
    Tche

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Full size image on the 404’ is closed to new replies.