One place for hosting & domains

      How To Add a Background Image to the Top Section of Your Webpage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      In this tutorial we’ll learn how to use a <div> container to structure the top section of the webpage. We will use the style attribute to specify the height of our <div> container, apply a background image, and specify that the background image should cover the entire area of the <div> container.

      Before we get started, we’ll need a background image. You may download and use our demonstration site’s background image for the purpose of the tutorial, or you can choose a new image. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series).

      Once you’ve chosen your background image, save the image in your images folder as background-image.jpg.

      Next, paste the highlighted code snippet into your index.html file below the opening <body> tag and above the closing </body>:

      . . .
      <body>
      <!--First section-->
      <div style="background-image: url('Image_Location'); background-size: cover;; height:540px;
      </div>
      </body>
      </html>
      

      Make sure to switch the text that says Image_Location with the file path of your image and don’t forget to add the closing </div> tag.

      Note that we have added the comment <!--First section--> to help organize our HTML code. A comment is a piece of code that is ignored by the browser. Comments are used to help explain or organize code to developers. They are created with the opening tag <!-- and the closing tag -->.

      Save the file and reload it in the browser. You should receive something like this:

      Background image in top section

      Alternately, you can use a background color instead of a background image. To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this:

      ...
      <body>
       <div style="background-color: #f4bc01; height:540px;"> 
      </div>
      </body>
      </html>
      

      Save the file and reload it in the browser to check your results. The background image should now be replaced with a container that is the same size but has a solid yellow color.

      If you compare the <div> container on your site with the same <div> container on the demonstration site, you may notice that your webpage’s <div> container is surrounded by a small margin of white space. This margin is due to the fact that all HTML pages are automatically set to have a small margin by default.

      To remove this margin, we need to add a style attribute to the opening <body> tag that sets the margin of the <body> element of the HTML page to 0 pixels. Locate the opening <body> in your index.html file and modify it with the highlighted code:

      <body style=“margin:0;”>

      Save and reload the file in your browser. There should now be no white margin surrounding the top <div> container.

      You should now know how to add a <div> container with a background image to structure the top section of a webpage.



      Source link

      How To Add a Profile Image To Your Webpage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      In this tutorial, we’ll walk through the steps of adding and styling the top profile image as displayed in the demonstration site.

      Before we get started, you may want to pick a personal profile photo for including on your site. If you don’t have a profile photo, you can use any image for demonstration purposes or create an avatar through a site like Getavataaars.com. Otherwise, you can use the image from our demonstration site by downloading the image here. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series.)

      Once you’ve selected an image, save it as small-profile.jpg in your image folder.

      Paste the following <img> element in between the opening and closing <div> tags you created in the last tutorial like so:

      ...
      <div style="background-image: url('ImageLocation');
        background-size: cover; height:540px;">
      <img src="https://www.digitalocean.com/community/tutorials/ImageFilePath" style="height:150px;">
      </div>
      ...
      

      Make sure to switch out the highlighted src address with the file path of your profile image. Note that we are also using the style attribute to specify the height of the image to 150 pixels. The <img> element does not require a closing tag.

      Save and reload the page in the browser to check your results. You should receive the following:

      Profile image on background image

      Next, let’s add properties to our style attribute that will give our image a circular shape, a yellow border, and a top margin that push our image 80 pixels down from the top of the page.

      Add the highlighted properties to your <img> element:

      <img src=“ImageFilePath” style=“height:150px; border-radius: 50%; border: 10px solid #FEDE00; margin-top:80px;”>

      Make sure you still have the correct file path of your image listed as the src address. Save the file and reload it in the browser. You should receive something like this:

      Styled profile image

      Before moving on, let’s briefly pause to study the code modifications we just made. Setting the border-radius value to 50% gives the image a circular shape. Setting the border value to 10px solid #FEDE00 gives the image a solid border that is 10 pixels wide and has the hexadecimal color value #FEDE00. The margin-top property sets the top margin to 80 pixels.

      You should now know how to add and style a profile image to your website with HTML. We are now ready to add a title and subtitle to the webpage in the next tutorial.



      Source link

      Deploy an Image to a Linode


      Updated by Linode

      Written by Linode

      When you first create a Linode, you generally deploy a Linux distribution or other image to it upon creation. However, it is also possible to deploy additional images and Linux distributions to your Linode that will exist alongside your first image. Additionally, you can switch between these extra images by rebooting your Linode. This QuickAnswer guide will show you how to deploy an additional image.

      Note

      To deploy additional images, your Linode will need some unallocated space for those new images. When following the steps below, if you find that you don’t have sufficient unallocated space, then you have two options:

      Deploy an Image

      1. Log into the Linode Cloud Manager. Click on the Linodes link in the sidebar navigation. A table of your Linodes will appear.

      2. Click on the row corresponding to your Linode. A dashboard for your Linode will appear.

      3. Click on the Advanced tab from this page, and find the Disks panel that appears below it.

        Add a Disk link

      4. On this panel, click the Add a Disk link.

      5. The Add Disk form will appear. Select the Create from Image option at the top of the form, then complete the remaining fields in the form:

        Field Description
        Label A name for the disk created from the image that you will select.
        Image The Linux distribution or other image that you would like to use. If you have any custom images saved, they will be listed at the bottom of the dropdown menu.
        Root Password A strong, complex, and unique password for the root user on your new image’s disk.
        SSH Keys Any SSH keys that you would like to assign to the root user on your new image’s disk.
        Size The size of the disk that will be deployed. If you also want to create a new swap disk, make sure to enter a value that’s less than the Maximum Size label below this field. The current amount of unallocated space on your Linode will be listed in this label.
      6. When you have completed the form, click the Add button.

      Optional: Deploy a Swap Disk

      Your new Linux distribution or image will often require a swap disk in order to boot. If you already have a swap disk on your Linode from a previous image deployment (visible under the Disks panel), you can reuse that same disk with your new image. Otherwise, you can create a new swap disk:

      1. Revisit the Disks panel under the Advanced tab for your Linode. Click the Add a Disk link.

      2. In the Add Disk form that appears, choose the swap option from the Filesystem dropdown menu. Then enter a label and size (usually 128MB, 256MB, or 512MB). Click the Add button to complete the form.

      Create a Configuration Profile

      To boot your Linode with the new image, you’ll need a configuration profile that is associated with the image:

      1. Navigate to the Advanced tab for your Linode and find the Configuration panel underneath it. Click the Add a Configuration link on this panel:

        Add a Configuration link

      2. The Add Linode Configuration form will appear. Enter values for these fields:

        Field Value
        Label A name for the configuration profile.
        Comments Enter any comments that may help you remember the purpose for your new configuration profile, or any other notes you’d like to record.
        Select a Kernel Select the GRUB 2 option.
        /dev/sda Choose the disk for the new image/Linux distribution that you deployed.
        /dev/sdb Choose your swap disk.

        For all of Linode’s standard distribution images, the other fields can retain their default values. For custom images, you may need to update other parts of the configuration profile; review the Disks and Configuration Profiles and Install a Custom Distribution on a Linode articles for further guidance.

      Next Steps

      To reboot with the new image, navigate to the Configuration panel under the Advanced tab for your Linode. Select the more options ellipsis for your new profile and click the Boot This Config option in the dropdown menu that appears:

      Boot This Config option

      For help with configuring the software on your new image, review the Getting Started and How to Secure Your Server guides.

      Find answers, ask questions, and help others.

      This guide is published under a CC BY-ND 4.0 license.



      Source link