insert background image on page

  • jgoldberg2013

    (@jgoldberg2013)


    10 years, 11 months ago

    graphicmania

    Participant

    A simple task I thought but I seem to fighting with this one.
    Because I a not sure what div tag to pull from to style in the child style sheet.
    This is the html code.

    <body class="page page-id-204 page-template page-template-full-width-page-php logged-in admin-bar custom-background customize-support">
<div id="container" class="hfeed">
<div id="header">
<div id="wrapper" class="clearfix">
<div id="content-full" class="grid col-940">
<div id="post-204" class="post-204 page type-page status-publish hentry">
<h1 class="entry-title post-title">test</h1>
<div class="post-entry">
</div>

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

    I know how to add image and how to style it but…
    The problem is I do not know what div id to use to style from – I know it has to be in the body for it to be for the whole wrapper page to be covered.(THIS IS NOT FOR COMPLETE SCREEN COVER – OBNLY FOR THIS PAGE – Post-204)
    I have read I SHOULD not call img in html and rather do it in CSS.
    Please advise what div id I use to place image in as this is a template Ido not want to adjust the php file as I have used this template for about 7 pages of my site.
    Resposnsive theme – full width page template.
    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • WPyogi

    (@wpyogi)

    10 years, 11 months ago

    Is this the site? http://www.graphicmania.net/

    That’s not Responsive theme, and hard to be sure without seeing the page you want to change and it’s not very clear what you want to do, but possibly:

    body.page-id-204 {
  background-image url(.....);
}
    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    10 years, 11 months ago

    no the site is on a localhost.
    I did do the what you suggested but the image arrives half in the top left corner of screen and not even in the main wrapper.
    I figured this much out…

    #wrapper .post-204 {
  background: url(http://localhost/coinlogistics/wp-content/uploads/2013/05/background.jpg); no repeat center center;
  background-repeat: no-repeat;}

    do I still have to specify the size if I want to use background-size: cover; to ensure it is responsive.

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    10 years, 11 months ago

    Ok – I have figured how toget the full image to show but now it is not inline with th wrapper – center center. See attached image.
    http://imgh.us/un-aligned_image.jpg
    as you can see the circle design is over to the left of wrapper.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘insert background image on page’ is closed to new replies.