My banner image doesn't cover the full available width on the screen

Problem

You want your banner image to cover the full width of the space.


This is a method by which you can upload an image (such as a banner in the header section) and add html code to make the width of that image stay constant with the maximum width of the space you upload it to. 

Click Any Image Below To Enlarge

1) For example, you want to add a banner image to the header section of your class

2) You can add an image to the editing area, in this case the 'Summary' box by just drag and dropping the image into the box.

3) After you save the picture you might find it seems to large or too small for the page. For example the image opposite was too large so you can see the scroll bar at the bottom side of the image.

So to edit the header section, click on the edit section option from the edit dropdown menu in the top right corner. 

4) Now to view the 'code' view of what you're editing click the expand box  to see the next row of buttons. Then the HTML button to view the code. 

5) Now you need to insert the following text

style="width: 100%" 

Directly after the inverted commas enclosing the url.

Please note the html in the image and the instruction don;t match. The correct text is "width: 100%" not "max-width: 100%"

6) So now instead of the code reading as (in this example);

<p class="MsoNormal"><img src="https://classes.myplace.strath.ac.uk/draftfile.php/1030811/user/draft/179402412/Banner_-_Architecture_1600x600%20%281%29.jpg" alt="" role="presentation"><br></p> 

It should read

<p class="MsoNormal"><img src="https://classes.myplace.strath.ac.uk/draftfile.php/1030811/user/draft/179402412/Banner_-_Architecture_1600x600%20%281%29.jpg" "width: 100%" alt="" role="presentation"><br></p> 

Then click the html button  again to view it as an image and click 'Save changes'


Please note the html in the image and the instruction don;t match. The correct text is "width: 100%" not "max-width: 100%"

7) You should find that the image now automatically adjusts itself to remain the exact width of the section it's been posted in.

Filter by label

There are no items with the selected labels at this time.