Photoshop Question posted in
The official user guide can be found here.

My background just vanished – Photoshop

Working with Dreamweaver, and after some small css adjustments, my background for body won’t appear. I’ve changed it to a solid colour to see if the link was broken, but at best, when I open it in browser, it shows for half a second, before turning white. I’m literally baffled.

I can’t pinpoint how it started, as my background used to be there, fixed and the other divs would roll over the top of it. Now it’s jsut ugle white space.

here is my code:

 rel="stylesheet">@charset "utf-8";
/* CSS Document */

.bodydiv {
    background:red;url(Images/backgroundp1.jpg) ;
    background-size: cover;
    width:100%;
    padding:0;
    margin:0;


}

/* Font families : font-family: 'Cabin Sketch', cursive;
font-family: 'Averia Sans Libre', cursive;* font-family: 'Special Elite', cursive;*/




.page1 {
    margin-right: auto;
    margin-left : auto;
    width: 100%;
    height:40em;
    background-size:cover;
    padding: 0;
    margin: 0;


}


#me {
    grid-column: 2;
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 7em

}

h1{
    text-align: center;
    font-size: 4em;
    font-family: 'Cabin Sketch';
}

p {
    font-family: 'Special Elite', cursive;
    line-height: 180%;
}

h3 {
    font-family: 'Cabin Sketch';
    text-transform: capitalize;
}



.page1content{
    width: 800px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
}


.page2{
    background:  url(Images/DSC04168.jpg) center center ;
    background-size: cover;
    height: 50em;
    padding-bottom: -10;
    margin-bottom: 0;

}

.page3{
    background: url(Images/DSC00472.jpg) center center;
    background-size: cover;
    height:50em;
    padding-top: 0;
    padding-bottom: 0;
}

.page4 {
    display:grid;
    grid-template-columns: 50% 50%;
    height: 70em

}

.page4a {
    grid-column: 1;
    background: rgba(81,81,81,1.00);
    color:rgba(198,198,198,1.00);
    display: grid;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 15% auto 15%;
}

.aboutme {
    grid-column: 2;
    grid-row: 2;
}

.page4b {
    grid-column: 2;
    background: rgba(198,198,198,1.00);
    color: rgba(81,81,81,1.00);
    display:grid;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 15% auto 10%;
}

.form {
    grid-column: 2;
    grid-row: 2;
}

input[type], select{
    width: 100%;
    padding: 12px 20px;
    margin: 8px;
    display: inline-block;
    border 2px solid;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgba(81,81,81,1.00);
    color: rgba(198,198,198,1.00)

}

input[type=text]:focus {
    border: 2px solid rgba(81,81,81,1.00) ;
}

textarea{
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: rgba(81,81,81,1.00);
    font-size: 16px;
    resize: none;
}

input[type=submit] {
    width: 33%;
    background-color:rgba(198,198,198,1.00) ;
    color: rgba(81,81,81,1.00);
    padding: 14px 20px;
    margin: 8px 0;
    border: 2px solid rgba(81,81,81,1.00);
    border-radius: 4px;
    cursor: pointer;
}
<!doctype html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Averia+Sans+Libre|Cabin+Sketch|Special+Elite" rel="stylesheet">
    <link rel="stylesheet" href="s">
<meta charset="utf-8">
<title>Mrhuggies-portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>



<body>

<div class="bodydiv">       

    <div class="page1">

         <div class="page1content">
               <img id="me" src="Images/pof2.png" width="600" height="370px" alt="Picture of Thomas Hughes"/>
<h1>ThomasHughesPortfolio<br>WebDesigner/Photographer</h1>
      </div>
</div>


    <div class="page2">

        </div>


    <div class="page3">

    </div>

    <div class="page4">

        <div class="page4a">
            <div class="aboutme">
                <h3>About Me</h3>
                <p> Hello, I'm a 25 year old that goes by the name of Thomas Hughes, based in <b>Glagow</b>. I design UI/UX whlist writing all of my own code. I enjoy making something beautiful, functional and enjoyable to use and browse. Solving problems, <b>capturing beauty</b> and a keen eye for design is where my passions lie. 
                    Adept at Photoshop, Dreamweaver and getting to grips with other programmes that Adobe Suit has to offer.
                    Feel free to get in touch with any free-lance <b>opportunities</b> or job proposals</p>
                </div>
        </div>
    <div class="page4b">
        <div class="form">
        <h3><b>I want</b> to hear from you</h3>

        <p>Want to talk about a job, see how I'm doing or maybe ask me out for a coffee?</p>

            <form action="">
            <label for="name"></label>
                <input type="text" id="name" name="firstName" placeholder="Your name..."


                <label for="name"></label>
                <input type="text" id="name" name="firstName" placeholder="Email..."


            <label for="name"></label>
                <textarea><input type="text" id="name" name="firstName" placeholder="Write your message in here..."></textarea>


        <input type="submit" value="Send Message">




                       </form>


                       </fom>
        </div>
        </div>  
    </div>



    </div>
    </body>
</html>
Tags:

2

Answers


  1. 0

    In here

    background:red;url(Images/backgroundp1.jpg);

    there should be a comma after “red”, not a semicolon:

    background:red, url(Images/backgroundp1.jpg);

    Otherwise url(Images/backgroundp1.jpg); is a (meaningless) rule for itself.

    Login or Signup to reply.
  2. 0

    The correct way to display a background image with a solid color using shorthand is

    background: red url('Images/backgroundp1.jpg');

    There shouldn’t be a comma or semicolon in the declaration. See https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Background_Properties

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search