Adding a Background Image and Removing Margins with CSS

[mharoot]

Adding a Background Image and Removing Margins with CSS

Consider the following use case:

The Design of the Barber Shop on Desktop

We would like to have a background image similar to this mockup barber-shop-website:

The Design of the Barber Shop on Iphone 5/SE

Notice the background image holds its width and the full height of the device.

The Design of Our Site on Desktop

It is problematic for us to have the whitespace at the top. We need to remove the margin style responsible for causing this and we can do so quickly my customize the pages css.

CSS Solution

The Snippet

.entry .entry-content > *, .entry .entry-summary > * {
    margin: 0px;
}

[mharoot]

How to Add a Background Image With Visual Composer

1. Hover over pages and select add new page with visual composer:

2. Type in a Page title and Page slug for the url and select the Add New Element button:

3. Select Row:

4. Select Stretched Row and Column Setting:

5. Scroll down to Full Height and turn it on so that so you can set the row to be full screen height, you should see additional options pop up below:

6. Scroll Down to Images and Select Add Image:

7. Upload an image, you may need to refresh the page in order the select the image. Select the image and press the Add Image Button:

8. Assure Background Style is Cover and Selecting Any of the center Icons should position it in the center and would not make any difference if it's in the top middle or bottom.

9. Once you are done you need to publish it and close the page

10. We can now navigate back to our page using the slug issue1 after the host name: http://localhost:8888/visual_composer_demo/issue1/

[mharoot]

How to Find the CSS to style Using Google Chrome Inspector

1. Right click, inspect in chrome, hover over the body html element code snippet and click to view the CSS styling:

2. Work your way down each element, clicking them one by one, until you find what is causing the white space at the top:

3. We can copy the culprit css straight from chrome inspector and start modifying the css for it:

4. Start modifying the css code directly from chrome inspector

.entry .entry-content, .entry .entry-summary {
    max-width: 80%;
    margin: 0 10%;
    padding: 0 60px;
}

### 5. If you notice after playing around with the settings that the whitespace is not being removed then you must look for another source of where it is coming from. In my case this did not resolve my issue.
```css
.entry .entry-content, .entry .entry-summary {
    margin: 0;
}

6. Keep searching by clicking each element until you find the real culprit:

7. Solution found my setting this in chrome Inspector.

.entry .entry-content > *, .entry .entry-summary > * {
    margin: 0px;
}

[mharoot]

How to add the Custom CSS

1. Be sure to be logged in as admin. Navigate to page using the url slug you gave it in my case the url is http://localhost:8888/visual_composer_demo/issue1/. Then click Customize:

2. Select Additional CSS and add What we had to customize to get rid of the white space

Before

After