Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Background-Image

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #247771
    TV
    Participant

    I’ve been trying to get my background-image to go to the front. I’ve read that I ought to use CSS and it should be done internally and externally. I did just that. My background-image is stuck behind the table. Oh yes, I know I shouldn’t use tables for a website (will be correcting that). I placed the CSS coding into the “html, body” and nothing works. I placed the CSS coding into the “table” and nothing works.

    I apologise, but I don’t have CodePen. I use TextMate. I’ll be looking into getting CodePen.

    Here is my code:

    <!DOCTYPE html>
    <html>
    <head>
    <link href=”../css/contactus.css” type=”text/css”
    rel=”stylesheet” />
    <style type=”text/css”>

        * {
            margin:0;
            padding:0;}
    
            table {
                width: 100%;
                height: 100%;}
    
            html, body {                                    
                height: 100%;}                              
    
            body {
                background-image: 
                url("./images/CloudsBackground-01.png");
                no repeat;}                                                                                                                     
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;    
        &lt;table border="1"&gt;
        &lt;td colspan="2" class="abadayTitle"&gt;Abaday 
            Strawbear Productions&lt;/td&gt;                        
    &lt;tr&gt;
        &lt;td width=12% class="abadayMenu"&gt;Menu&lt;/td&gt;  
        &lt;td rowspan="5" class="contactusContent"&gt;
            <p>Add info</p>
         &lt;/td&gt;
    &lt;/tr&gt; 
    &lt;tr&gt;
        &lt;td class="abadayMenu"&gt;&lt;a 
            href="about.html"&gt;About</a>&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="abadayMenu"&gt;&lt;a 
            href="services.html"&gt;Services</a>&lt;/td&gt;                     
    &lt;/tr&gt;
    &lt;tr&gt; 
        &lt;td class="abadayMenu"&gt;&lt;a 
            href="portfolio.html"&gt;Portfolio</a>&lt;/td&gt;           
     &lt;tr&gt;
        &lt;td class="abadayMenu"&gt;Contact Us&lt;/td&gt; 
     &lt;/tr&gt;
     &lt;tr&gt;
        &lt;td colspan="2" class="abadayCopyright"&gt;<p>&copy;2016 
            Abaday Strawbear Productions</p>&lt;/td&gt;
    

    </table>
    </body>

    #247772
    Beverleyh
    Participant

    Good news! CodePen is a free online tool that you can just ‘use’ – there are paid accounts too but you’re not obligated to sign-up. It’s great for providing live demos of problematic code so that we can help you troubleshoot live in the browser with a real-life sample.

    But from your description and code snippets, I’m afraid you aren’t going to be able to move a background-image that currently resides on the body element, so that it appears in front of the table (*). I’m not really sure why you’d really want to do that anyway because it would obscure your website.

    However, it’s likely that I’ve misunderstood, so your intentions might become clearer if you provide a diagram/mock-up of what the image is supposed to look like in relation to the layout-table. From there we should be able to offer more helpful suggestions on how you can achieve your goal.

    () *maybe with a pseudo element but let’s focus on getting your requirements straight for now

    #247773
    bearhead
    Participant

    I’m not really sure what you are trying to do? A background image is always going to be behind the content of any element it is in (hence “background”). If you want the background image to be on top of the table, you’d have to either use an inline image, or create another element that overlays the table. Of course, either of those options will prevent you from seeing or interacting with any content in the table.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.