Adding background images with Sitejet

Background images in web pages

This note briefly describes how to use background images with Sitejet. Bcckground images are difficult for a few reasons. The biggest problem is rendering an image, or a repetition of an image as a “tiles” so that it appears consistently on large screens, laptops, tablets, and mobile devices. For background images, consider using expert help.

sample background image

In this example, a website owner uses a semi-transparent section to overlay a background image.

Click on the headers below to learn more about managing background images using Sitejet Builder’s “no-code” option.

Where does the image belong?

    A web page is not like a sheet of A4 paper – unless we specify an area in which to contain our content, a web page has limitless dimensions. So, the first issue to decide is where does an image belong?

    Web site layout elements

    Conventionally, a web page has a global element called a CONTAINER. Within a container there can be one or more SECTIONS, which in turn can have one or more MODULES.

    Background images can be inserted in any of these elements. A background image can fill an entire container, or it can fill an element as finite as a row within a module. An image can fill any element in between. An image could include a simple solid fill colour like light grey to distinguish between alternate rows.

    How big should the image be?

    Image dimensions

    Unfortunately, what works for one web site may be disastrous elsewhere, and image content itself can become a problem. You may have to crop or scale an image after seeing what it looks like when you insert the image into a background.

    The best starting point is an image that measures 1920w x 1080h. This will usually resolve satisifactorily for desktop/laptops. However, background images need to be sized differently for tablet and mobile, so you may need 2 or 3 images which can be called upon to suit viewers’ devices. However, this is not an absolute rule. Headers (especially) and sections/rows may require a sizizing compromise to work efficiently with a page layout.

    File size and type

    Files should be no more than 500KB. For home use, file size is not critical, however mobile users may experience slow page loads in areas where mobile coverage is minimal, and those who carry minimum data limits are more susceptible to possible service drop-outs as they reach monthly targets.

    webp may be desirable file formate for images that tend to err towards large file sizes. jog/jpeg is a standard file format for static images, and png is used for images where image transparency or other effects are required. 

    Image Considerations

    How the image is programmed depends on a few factors. For instance, you may want a static image that “covers” the container area. A background image can be anchored to text as you scroll, but it can remain static so that text moves as you scroll. Also, a background image may need to have some opacity – i.e. fading so that textual content is clearly legible. This can be handled by your desktop graphics software before you add the picture to your web site image library. Or a background image can be managed by introducting “opacity” or “transparency” in html coding on your web site dashboard. This can make an image look like a watermark when heavily applied. If you are using a pattern, it would be possibe to use a small square or rectangular image which your web server replicates across a container area.

    Embedding background image using Sitejet dashboard

    This workflow is for a situation where an image is to be applied to a website page “container”. The options are available at section and module levels.

    1. Select the Container: Click on the container you want to edit.

    2. Open the Style Settings: In the right-hand panel, go to the “Style” tab.

    3. Background Settings:
        • Scroll to the Background section.
        • Choose “Image” as the background type.
        • Click to upload or select an image from your media library.

    4. Adjust Display Options:
        • Set background size (e.g., cover, contain).
        • Choose position (e.g., center, top-left).
        • Set repeat options if needed.
        • Optionally, add a background overlay for contrast.

     Options like “cover”, “contain” and placement all have drastic effects on rendering and may need individual configuration for tablet and mobile view. 

    Summary

    Background colours, like a light grey or light blue solid colour, are effective and easily implented. Background images can be visually appealing, but are awkward to render and are probably better reserved for expert intervention unles you are prepared to spend a lot of time configuring layout settings. You can use Sitjet’s “no-code” approach to configure background images at container level, and the principle applies to section and module elements. Advanced effects may require using the HTML authoring tool in sitejet to configure xHTML features.

    About ComStat.uk: Internet Service Provider Comstat provides IT support, web hosting, and media services including web design, Microsoft 365 setup, and audio/video production, serving businesses across Denbighshire, North Wales and Wirral from Ruthin, and Lancashire and the Northwest from Bolton.

     

    How to configure DNS for a contact form

    Integrating contact forms with an external email service

    This guide walks you through modifications you need to make to your domain name’s DNS zone record so that your contact form mail can reliably connect to your external email service, like Microsoft 365 or another email supplier.

    configure DNS for contact forms

    This article is written for web designers who know websites but may not be as familiar with DNS.

    Click on the headers below to find out how to modify DNS records and other steps in the order shown. Click on images to view at full-sized resolution.

    1. Why?

    One of the biggest reasons spam happens is because a hacker can purport to be you by sending email using your email address from email servers that you do not control. This means end users have to constantly combat rogue email, and email services have to make educated guesses about what is good email before passing it to your Inbox.

    These modifications to SPF, rDNS, DKIM, and DMARC help a receiving email server determine that the email it receives really does come from an email server in your control.

    If a receiving server cannot validate the source of your email, the receiving server is likely to conclude that your email has been sent from a spammer, in which case the email will be dropped. Your server can implement some tools, but your domain name has to be configured to co-ordinate with your server too.

    2. Scenario

    This example assumes that a web site owner uses Microsoft 365 for email and the domain name which governs the web site and email is managed at a registrar like GoDaddy where the authoritative zone record is held. In reality, the registrar might be different. For instance, the domain name might be managed at Cloudflare or even Microsoft 365 itself.

    The important point is to understand where your authoritative zone record is managed. the web server will have a zone record. However, if the domain name is regitered at a regisrar like Tucows and the domain name uses Tucow’s nameservers, then the authoritative nameserver for your domain is at Tucows.

    This workflow assumes:

    • Your website is hosted on at IP address 88.202.183.10
    • The domain’s authoritative DNS is managed at a registrar like GoDaddy
    • Email for the domain (e.g., yourdomain.co.uk) is handled by Microsoft 365
    • You want your contact forms to send email from the domain (e.g., info@yourdomain.co.uk) using your web server’s mail system

    This assumes that you already have a valid email address called info@yourdomain.co.uk. Also, this assumes that DKIM and DMARC are already configured for Microsoft 365. Microsoft organises its DKIM records using CNAME records – this means that Microsoft can handle DKIM identifiers in-house.

    This is useful because most other entities use an A record which means multiple there would be multiple DKIM records in your authoritative zone. This is possible, but it might affect reliability. So, if you already have DKIM records in your authoritative zone to cope with another email server, it might be worth considering options.

    Preparation

    Review the existing authoritative zone record to check for SPF, DKIM, and DMARC. You will need:

    • credentials for the domain name registrar control panel access
    • credentials for cPanel to edit and get records from your web server
    • credentials for any other services that might be implicated, like Microsoft 365
    • if DKIM is not already configured, refer to this guidance note
    • if DMARC is not already configured, refer to this guidance note
    3. SPF (Sender Policy Framework)

    SPF tells receiving email servers which IP addresses you have approved to send mail for your domain. Usually, this record is already posted in your zone record. In the example below, the record is only configured to recognize Microsoft 365:

    v=spf1 include:spf.protection.outlook.com -all

    So, now we need to include your web server’s IP address to verify that your web server is a valid email server too.

    What to do:

    • Log into the DNS editor where your domain name is managed (e.g. GoDaddy)
    • Find your existing SPF TXT record (it starts with v=spf1).
    • Add your server’s IP: ip4:88.202.183.10 before the -all.

    Example:

    v=spf1 include:spf.protection.outlook.com ip4:88.202.183.10 -all

    The syntax is not absolute. For instance, the following record also works:

    v=spf1 ip4:88.202.183.10 include:spf.protection.outlook.com -all

    Adding your web server’s IP address to the SPF record authenticates both Microsoft 365 and your web server as valid mail servers for your domain.

    4. rDNS (Reverse DNS / PTR Record)

    Unless you rely on exceptional settings, you do not need to do anything about rDNS. A PTR record is already established in the reverse zone for our servers. This means that the IP address for your server is already mapped to your hostname.

    A PTR record can only be created where a reverse zone is accessible. Usually, this means having to post a support ticket at your domain registrar, or asking the owner of the IP address you have been granted to map the setting for you.

    5. DKIM (DomainKeys Identified Mail)

    DKIM adds a digital signature to your emails.

    Usually, DKIM is established with an A record. Microsoft 365 already uses DKIM via CNAME records. This is convenient. Other registrars might already require an A record that you rely on. It is possible to have multiple A records establishing DKIM records for different servers. This might cause some reliability issues though. So, you might need to monitor traffic flow after making this kind of change. In any event,  your web server needs its own DKIM setup if it sends mail too.

    What to do in cPanel:

    • Log into cPanel
    • Go to Email  > Email Deliverability
    • Click open <Manage>
    • Do not enable DKIM. Instead:
    • Copy the TXT Name and Value fields shown for DKIM
    • Add this TXT record to your DNS at GoDaddy

    This allows receiving servers to verify that your server’s emails are legitimate.

    6. DMARC (Domain-based Message Authentication, Reporting & Conformance)

    DMARC tells receiving servers how to handle emails that fail SPF or DKIM checks. settings. This may already be established in your authoritative zone and that record would already be valid as long as:

    • your SPF record already includes for your web server’s IP address
    • or DKIM passes for your server (if you set it up)

     Example

    You can use the values suggested in cPanel > Email > Email Deliverability to create a DMARC record. DMARC uses an industry defined instruction set which is universally adhered to. For now, it is probably only necessary to operate DMARC in “test” mode. However, some services like Microsoft 365 may be sensitive (especially to “contact form” mail and require an elevated metric like p=quarantine.

    Name: _dmarc.domainname.co.uk
    Value: v=DMARC1; p=quarantine; rua=mailto:your-alias@domainname.co.uk

    The three incremental states for DMARC are:

    • p=none
    • p=quarantine
    • p=reject
    8. cPanel Mail Routing

    Lastly, check that your server expects email to be managed externally. As the records above are being added to your authotitative zone, cPanel will often detect that external email servers are now in use. However, you need to check this setting.

    What to do:

    • log into cPanel > Email > Email Routing
    • check <Remote Mail Exchanger> if it is not already enabled
    • save the setting

    This ensures your server sends contact form emails to Microsoft 365 instead of trying to deliver them locally.

    Testing and Summary

    After updating your DNS:

    • Use MXToolbox to check SPF, DKIM, and DMARC
    • Send test emails from your contact form to Gmail or Outlook and inspect the headers
    • Look for spf=pass, dkim=pass, and dmarc=pass

    Summary

    By configuring SPF, rDNS, DKIM, and DMARC correctly, your contact forms can send email reliably—even when Microsoft 365 or other suppliers handle your domain’s email. This setup helps prevent your messages from being flagged as spam and protects a client’s domain reputation and brand intact.

    About ComStat.uk: Internet Service Provider Comstat provides IT support, web hosting, and media services including web design, Microsoft 365 setup, and audio/video production, serving businesses across Denbighshire, North Wales and Wirral from Ruthin, and Lancashire and the Northwest from Bolton.

    Free AI website design

    Sitejet - free AI website design generator

    Your web hosting account includes free access to Sitejet AI website design generator. Sitejet builds fully functioning websites with as little as your trading name, business sector, and a few other details. Sitejet includes a website design editor so that you or your website designer can customize website elements and introduce special effects.

    Choose from over 150 templates and site formats within your cPanel dashboard. Colours and elements can be customized.

    Sitejet usually costs from $15/mo as a standalone service at time of writing. We are now providing this feature in your cPanel dashboard as standard at no additionalt startup or ongoing cost.

    Click on the headers below to find more about Sitejet. Click on images to view at full-sized resolution.

    What does Sitejet do?

    Sitejet AI is an innovative DIY website builder. By providing your company name, business type, and a few other details, Sitejet AI can generate a professional website that reflects your brand and services using professionally authored website templates. Finshed websites are “mobile responsive”, which means that website content is optimized for PC, laptops, and mobile devices. The process can take seconds to execute.

    AI generated website design lowers cost barriers

    Sitejet is perfect for business owners who:

    • do not have IT expertise 
    • who want to establish an online presence
    • who need to minimize cost
    • who optionally want a proof-of-concept to minimize conventional development costs

    At time of writing, Sitejet Studio costs from $15/mo as a standalone product. As a cPanel user, we are including this utility as standard in your web hosting dashboard for no charge

    ecwid shopping cart

    Sitejet includes Ecwid Shopping Cart. Note that this feature is subject to subscription for more than 5 product listings.

    In addition to a customizable template library (about 150 mobile-responsive templates at time of writing), Sitejet includes:

    • AI text generation and image/video galleries
    • no-code drag and drop editor for layout editing
    • AI co-ordinationwith business logos, and
    • SEO meta and content optimization
    • SEO reporting/metrics by Xovi Now 

    Read more about Sitejet AI here.

    Your Sitejet Builder icon is already installed in your cPanel dashboard in the <Domains> section. If you already operate a web site, you should contact us first about how to deal with transition.

    Save on Conventional Designer Costs

    Hiring a professional web designer can be expensive. With Sitejet AI, you can bypass these costs and still achieve a high-quality website. The AI generator handles the heavy lifting, creating a site that is both functional and visually appealing. This means you can allocate your budget to other important areas of your business.

    AI web site templates

     AI can make big inroads on web design costs. However, templates are often a “proof of concept” and in our experience users tend to want some kind of customization. Sitejet provides a dashboard for dealinng images, fonts, colour themes, and more. Read the next section to understand how you can use Sitejet AI templates to set the scene for your web designer to customize features.

    Demonstrate Your Vision to Website Designers

    Templates never quite get it right. This is why big business relies on professional help to achieve visual improvements and SEO optimization. So, AI website generation is not a replacement for professional website design at all. Instead, it works bes as a tool to help your website designer target qualitative improvements at a significant savings to you.

    If you plan to hire a web designer for more detailed and customized effects, Sitejet AI can be incredibly useful. By generating a basic website as a “proof of concept”, you can clearly demonstrate your vision and requirements for quotations or tender. This saves time and also ensures that the final product better aligns with your expectations.

    Summary

    Sitejet provides you with no-code drag and drop editor to build your website from the ground up. Use it to design your own website or as a proof of concept to better equip your design team to achieve better results. 

    Sitejet usually costs about £150+ per annum, so this addition to your cPanel dashboard already brings enormous value to bear, compared to conventional design costs.  

    About ComStat.uk: Internet Service Provider Comstat provides IT support, web hosting, and media services including web design, Microsoft 365 setup, and audio/video production, serving businesses across Denbighshire, North Wales and Wirral from Ruthin, and Lancashire and the Northwest from Bolton.

     

    How to manage a web site contact form

    Contact forms - understand your risk

    Website contact forms are a convenient way for visitors to get in touch with you. However, they introduce potentially catastrophic risks that you should be aware of.

    Contact form field validation

    Validating form fields helps reduce risk of malicious injection which could hijack or destroy your web site.

    Browse this article to explore inherent contact form risks and how to manage them, especially if you are a “self-serve customer. If you do not rely on our optional support, there may be charges for support requests.

    Click on the headers below to find out how to find out more about contact form issues. Click on images to view at full-sized resolution.

    Malicious infiltration, abuse, and DNS

    Web site forms are problematic. It should be easy to display a form that asks for a name, email address, phone number, and message. It is easy to make the form look attractive. However each field in a contact form is an open invitation for a hacker to destroy your web site or orchestrate a bulk email of thousands of emails that you end up bearing the cost of. Without concerted attention, it is a matter of time before a hacker finds a vulnerable contact form.

    Contact form problems fall into two areas:

    Malicious infiltration and abuse

    Contact forms are a significant target for malicious activity. Hackers look for vulnerable contact forms to inject harmful code into your website. Statistically, small businesses are the most frequently exploited victims. Malicious infiltration causes catastrophic trouble like data breaches or site crashes. Common attacks include SQL injection (aka vector attack) or cross-site scripting (XSS). Additionally, spammers might flood your form with junk messages, making it hard to find genuine inquiries.

    DNS Issues and Email Validation

    When someone submits a contact form message at your web site, the information is often sent to an external email address. If there are issues with your Domain Name System (DNS) settings, these emails will probably be dropped without notice to anyone. Since contact form abuse is such a significant target for abuse, email gateway servers are especially sensitive to improperly validated email headers. This means your email server has to be correctly configured with your web site’s IP address using SPF, rDNS, DKIM, and DMARC.

    Usually, resolving your DNS for contact form validation needs expert attention and may be beyond the scope of a web designer or in-house expertise. This does not mean web designers do not know their job. Intead, DNS is its own skillset, requires specialised knowledge,and also needs to take account of broader IT processes in your organization.

    How to secure your contact form

    Here are the three most important things you can do to secure your contact form:

    Validate form fields

    If you do not restrict the size and content of a form field, anyone can inject source code (an executable program), click <send> and your web server will execute the code which could mean web site destruction or hijacking your identity. Either eventuality is catastrophic and it is easier to do than reading this article.

    Therefore, validate fields to limit the length of text. For instance,

    • <name> fields could be restricted to 20-30 characters
    • numerical composition of a phone number might have to comply with a special formatting, like aaaaa bbb ccc
    • email addresses might need to contain “@”, include a valid domain extension like “.co.uk”, and be limited to 40-50 characters
    • “message” field could be restricted to 150, 250, 350 characters

    This is all “client-side” operation. All of these seriously curtail options for hackers. 

    DNS

    DNS is especially problematic. For instance, your email might be handled by your domain name registrar, or Microsoft 365, and your contact form has nothing to do with your organisation’s usual email server.

    Usually, your domain name needs to be customised to include the location and characterisitcs of your contact form. This is “server-side”, and actually not even that because often these modifications might need scripting at a domain name registrar. This is what is called DNS, and it is one of the most difficult technologies to handle – even most web designers rely on upstream support for help with DNS. 

    Regular testing

    Test your contact forms regularly. Keeping spam out of email Inboxes is a moving battlefield. The web server itself is not the problem – when instructed, it acts, and in some ways that is part of the problem – it does not know how to discriminate between good and bad content without form validation.

    Hackers are creative, and organizations like Google, Microsoft, and Yahoo spend billions to keep up with evolving threats. In so doing, new security may render the source code you rely on for your contact form irrelevant, and the contact form programmer might not even know their source code is now outdated. Large organisation pay full time salaries just for someone to manage a contact form – daily. Moving to text-based chat bots is not designed to annoy customers – it is an attempt to avoid contact forms in the first place.

    Summary and alternatives

    Contact forms require constant owner-maintenance and are subject to ever-changing security threats. Also, because your form is programmed on “client-side” (e.g. in WordPress), owners assume responsibility for secure operation of their contact form.

    Even if you undertake the overheads of managing your contact form, your contact form should only be one way for customers to contact you. For example, alternate channels like those below move direct risk away from your web server:

    • Social media contact options like WhatsApp for Business, Facebook, Insta, etc.
    • Microsoft 365 Forms or Google Forms, which can be embedded on your web site

    Professional DNS annual support available

    If you purchased your domain before you began using our servers and you want us to manage your domain for you, we can administer your domain name records (DNS) annually for £75, including periodic updates as they are required. Use the PayPal QR code on our home page for payment, or contact us to arrange invoicing for our DNS service. This is included in optional support arrangements that you may already subscribe to. 

    About ComStat.uk: Internet Service Provider Comstat provides IT support, web hosting, and media services including web design, Microsoft 365 setup, and audio/video production, serving businesses across Denbighshire, North Wales and Wirral from Ruthin, and Lancashire and the Northwest from Bolton.