Full Width Featured Image

  • simconnection

    (@simconnection)


    9 years, 11 months ago

    Hi, I am currently using the Tesseract theme and the newest version of WordPress. I have been using site origin to build pages but am reverting back to just the standard text editor.

    I have been able to successfully add a featured image to my post pages with some tweaking of the php files in a child theme, but i have been unable to have a full width (stretched across the full browser window) featured image. Does anyone know how I could make this happen. I am learning stuff my self, so my knowledge is pretty limited.

    Here is a page that from my website, the top one is the one i added through php, the bottom is a full width through site origin widget. I am wanting the top to look like the bottom, preferably not with a full height. The specs for the bottom are 600px height.

    http://simconnection.net/2016/02/03/early-bird-access-will-give-players-full-access-to-planet-coaster-until-release/

Viewing 1 replies (of 1 total)
  • ikaring

    (@ikaring)

    9 years, 11 months ago

    I think the simplest way is to add 100% width div with the image as a background image.
    Put div with class name like ‘hero’ right before div#content like so;

    <div class="hero"></div>
<div id="content" class="cf site-content">

    Add css styles like:

    .hero {
  background: url('http://simconnection.net/wp-content/uploads/2015/09/12593991_359206020870201_3347543352591936245_o.jpg') no-repeat center top;/* Set path to your image */
  background-size: cover;
  height: 400px;/* Assign any height */
}
Viewing 1 replies (of 1 total)

The topic ‘Full Width Featured Image’ is closed to new replies.