Lighter hues are in the middle, and fade out to warm reds and cool blues with a warm peach in the middle. Reflected, which is similar to linear but the hues transition like a mirrorįor example, this abstract vector background with a subtle gradient loosely follows the radial pattern.Radial, where the colors or hues transition outward in a circular pattern.Linear, where the colors or hues transition in a horizontal, vertical, or sideways line.There are a few different types of gradients. Color gradients can go from a subtle look that fades one shade of a color into another, or bolder versions where different colors fade into each other. Color Gradient BackgroundĬolor gradient backgrounds are having a moment right now. Here are some cool background designs that will hopefully spark some inspiration for your website. Like anything else in design, website background trends change over time. It’s possible the best website background image size might be different for your site depending on how it was designed, but 1920×1080 pixels is generally the safest best for a background image. How Big Should a Website Background Image Be?Īccording to, the ideal website background size is 1920×1080 pixels with a ratio of 16:9 and a DPI of at least 72. Website background colors that are darker or brighter could distract too much from the elements of your site that matter. Generally, a lighter background color will showcase the images, text, and graphics that should be the focal point of your website. That’s because you want your background to complement the most important features of your page including text, calls-to-action, and other images. While the best background color for a website depends on the overall esthetic and existing color scheme, neutral, light-colored backgrounds are generally appealing for most websites. What Is a Good Background Color for a Website? If you like the way it looks and don’t think it’s distracting or a mismatch, it probably works with your design. Is high-resolution (i.e., should not look pixelated)įrom there, the perfect background pattern is a matter of personal taste.Sizes appropriately (i.e., the file should not be too small or too large, more on that below).Does not distract from the more important elements of the design.What Makes a Good Website Background Image?Ī good background should complement (and not distract from) the rest of your design and have several basic attributes. In this article, we’ll cover a few of the questions that designers ask about website backgrounds and touch on a few of the biggest trends in website background design that we’ve seen lately. From cool, simple backgrounds like subtle gradients to wild abstract liquid art illustrations, the perfect website background can be like a rug that pulls the room together. These days, background images are an artform in their own right and extend far beyond your website. Once upon a time, website backgrounds were just solid colors or seemingly random pictures that might not be sized correctly for the page. So I wrote a post about this and all the references are on that post.Website background design has come a long way since the early days of the internet. Sorry-while I'm trying to help and give attribution to several source articles, the overzealous rules here prevent me from posting more than one link to the references. In each of the above instances you can simply copy the CSS and paste it again, changing the IDs and image URL to change the bg image for different pages or categories. To target a custom template for a page, post or category use. To target multiple pages: body.page-id-33, Or do what I do and use the Catch IDs plugin. While hovering look at the bottom left of your browser and the page ID will be displayed in the status bar. To ID pages and posts, go to your Pages or Posts page and hover over the name of any page or post. If you note any error here (with the base CSS examples), please post a note about the error. IMPORTANT: The following are base examples and will need to be tested and tuned for your use.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |